Veu profile component

Profile.js

<template>
	<div class="container-fluid">
		<div class="row">
      <div v-if="loading">Loading...</div>
      <notification v-if="info" :info="info" :flag="requestSuccess"></notification>
			<div v-if="requestSuccess" class="col-lg-6">
				<h2>Profile settings</h2>

				<ul v-if="!editMode" class="list-group">
				  <li class="list-group-item list-group-item-action">Name: {{name}}</li>
				  <li class="list-group-item list-group-item-action">Username: {{username}}</li>
				  <li class="list-group-item list-group-item-action">Email: {{email}}</li>
				  <li class="list-group-item list-group-item-action">Country: {{country}}</li>
				  <li class="list-group-item list-group-item-action">City: {{city}}</li>
				  <li class="list-group-item list-group-item-action">Verified : {{confirmed}}</li>
				  <li class="list-group-item list-group-item-action">Status: {{status}}</li>
				  <li class="list-group-item">
				  	<button @click="swap" class="btn btn-primary">Edit</button>
					<router-link to="/auth/update-password" class="btn btn-primary">Change Password</router-link>
				  </li>
				</ul>

        <profile-edit-form
          v-if="editMode"
          v-on:swapMode="swap"
        ></profile-edit-form>

			</div>
		</div>
	</div>
</template>

<script>
const Axios = require('axios')
const getUserRoute = require('../../config/server') + '/user'
const boilerGenerator = require('../utils').boilerGenerator
const jwtToken = window.localStorage.getItem('sph_auth_token')
const authorizationHeader = 'Bearer ' + jwtToken
const headers = {'Authorization': authorizationHeader}

export default {
  name: 'Home',

  data () {
    return {
      info: '',
      loading: false,
      editMode: false,
      requestSuccess: false
    }
  },

  computed: {
    name: boilerGenerator(this, 'name'),
    username: boilerGenerator(this, 'username'),
    email: boilerGenerator(this, 'email'),
    country: boilerGenerator(this, 'country'),
    city: boilerGenerator(this, 'city'),
    confirmed: boilerGenerator(this, 'confirmed'),
    status: boilerGenerator(this, 'status')
  },

  created () {
    this.fetchData()
  },

  watch: {
    '$route': 'fetchData'
  },

  methods: {
    swap () {
      this.editMode = !this.editMode
    },

    fetchData () {
      const context = this
      this.loading = true

      if (jwtToken) {
        Axios.get(getUserRoute, {
          headers
        })
        .then(function (response) {
          context.loading = false

          if (response.data._id) {
            const user = response.data
            context.name = user.name
            context.username = user.username
            context.email = user.email
            context.country = user.meta.country ? user.meta.country : 'N/A'
            context.city = user.meta.city ? user.meta.city : 'N/A'
            context.confirmed = user.meta.confirmed ? 'Yes' : 'No'
            context.status = user.meta.status ? 'Active' : 'Inactive'
            context.requestSuccess = true
          }
        })
        .catch(function (error) {
          context.loading = false
          if (error) {
            context.requestSuccess = false
            context.info = error.response.data.message
          }
        })
      } else {
        this.$router.push('login')
      }
    }
  },

  components: {
    profileEditForm: require('./ProfileEditForm'),
    notification: require('./utils/Notification')
  }
}
</script>