title: VueJS page reload required to update ui
body: <p>When a user logs in I want to show a logout button but that requires me to reload the page after login even though its a one-page application like the code bellow:</p>
  
  <p>When a user logs in I want to show a logout button but that requires me to reload the page after login even though its a one-page application like the code bellow:</p>
  
  <p>App.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-app&gt;
    &lt;v-toolbar class="yellow darken-1"&gt;
      &lt;v-toolbar-title&gt;Check data&lt;/v-toolbar-title&gt;
      &lt;v-spacer&gt;&lt;/v-spacer&gt;
      &lt;v-toolbar-side-icon class="hidden-md-and-up"&gt;&lt;/v-toolbar-side-icon&gt;
      &lt;v-toolbar-items class="hidden-sm-and-down"&gt;
        &lt;v-btn small primary v-if="isLoggedIn" @click="logout()"&gt;Logout&lt;/v-btn&gt;
      &lt;/v-toolbar-items&gt;
    &lt;/v-toolbar&gt;
    &lt;v-content&gt;
      &lt;router-view&gt;
        &lt;v-container fluid&gt;&lt;/v-container&gt;
      &lt;/router-view&gt;
    &lt;/v-content&gt;
      &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import * as Auth from '@/components/Authentication'
  import Authentication from '@/components/Authentication'
  
  export default {
    name: 'App',
    data() {
      return {
        isLoggedIn: Auth.default.user.authenticated,
      }
    },
    methods: {
      logout() {
        Authentication.logOutUser(this);
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Code in Authentication where I login the user and store the token like the code bellow:</p>
  
  <pre><code>import Axios from 'axios'
  import router from '@/router'
  
  export default {
    user: { authenticated: false },
  
    authenticate (context, credentials, redirect) {
          var _this = this;
          Axios.post(`${url}`, credentials)
          .then(function (response) {
            // handle success
            console.log(response.data.data.data.message.token);
  
            let token = response.data.data.data.message.token;
            context.$cookie.set('token', token, '1D')
            context.validLogin = true
            _this.user.authenticated = true
            if (redirect) router.push(redirect)
  
          })
          .catch(function (error) {
            // handle error
            console.log(error);
            context.snackbar = true
            context.message = 'Login failed, please try again.'
          })
    },
  
    checkAuthentication () {
      const token = document.cookie
  
      if (token) this.user.authenticated = true
      else this.user.authenticated = false
    },
  
    logOutUser(context) {
      context.$cookie.delete('token');
      context.validLogin = false
      this.user.authenticated = false
      router.push('/login')
    },
  
    getAuthenticationHeader (context) {
      return `Bearer ${context.$cookie.get('token')}`
    }
  }
  </code></pre>