amazone/client/pages/profile.vue

<template>
  <main>
    <div class="container-fluid c-section">
      <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
          <div class="a-spacing-top-medium"></div>
          <h2>Profile Page</h2>
          <form action="">
            <!-- Name -->
            <div class="a-spacing-top-medium">
              <label for="">Name</label>
              <input
                v-model="name"
                :placeholder="$auth.$state.user.name"
                type="text" class="a-input-text" />
            </div>

            <!-- Email -->
            <div class="a-spacing-top-medium">
              <label for="">Email</label>
              <input
                v-model="email"
                :placeholder="$auth.$state.user.email"
                type="text" class="a-input-text" />
            </div>

            <!-- Password -->
            <div class="a-spacing-top-medium">
              <label for="">password</label>
              <input type="password" class="a-input-text" />
            </div>

            <hr/>
            <!--Button-->
            <div class="a-spacing-top-large">
              <span class="a-button-register">
                <span @click="onUpdateProfile" class="a-button-text">Update Profile</span>
              </span>
            </div>
          </form>
          <br/>
        </div>
        <div class="col-sm-3"></div>
      </div>
    </div>
  </main>
</template>

<script>
export default {

  data () {
    return {
      name: '',
      email: ''
    }
  },

  methods: {
    async onUpdateProfile () {
      try {
        let data = {
          name: this.name,
          password: this.password,
          email: this.email
        }
        let response = await this.$axios.$put('/api/auth/user', data)

        if (response.success) {
          this.name = ''
          this.password = ''
          this.email = ''

          await this.$auth.fetchUser()
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>