title: How to watch if a token gets registered in localStorage and change the value of a binded property accordingly?
body: <p>Currently, whenever a user logs in using correct credentials, a token get saved in the local storage. Now I'm trying to hide signin and signup after the user logs in.</p>
  
  <p>The code I currently have works relatively alright, however, I noticed that when the user logs in, the signin and signup routes do not disappear until the page is refreshed which is not very SPA like.</p>
  
  <p>Why is this happening?</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="nav-header"&gt;
          &lt;div class="wrapper"&gt;
              &lt;ul class='nav-ul'&gt;
                  &lt;router-link to="/" tag='li' active-class='active' exact&gt;&lt;li&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;/router-link&gt;
                  &lt;router-link to="/signup" v-if="!isLoggedIn" tag='li' active-class='active' exact&gt;&lt;li&gt;&lt;a&gt;Sign Up&lt;/a&gt;&lt;/li&gt;&lt;/router-link&gt;
                  &lt;router-link to="/signin" v-if="!isLoggedIn" tag='li' active-class='active' exact&gt;&lt;li&gt;&lt;a&gt;Sign In&lt;/a&gt;&lt;/li&gt;&lt;/router-link&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          computed: {
              isLoggedIn() {
                  return !!window.localStorage.getItem('token')
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>App.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;app-header&gt;&lt;/app-header&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import Header from './components/header.vue';
      export default {
          components: {
              appHeader: Header
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Sigin.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;input v-model="email" placeholder="Your Email..."&gt;
          &lt;input v-model="password" placeholder="Your Password..."&gt;
          &lt;button v-on:click.prevent="signin" type="submit" name="submit"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import axios from 'axios'
      axios.defaults.baseURL = 'http://94.155.24.68/api';
  
      export default {
          data: function() {
              return {
                  email: '',
                  password: ''
              }
          },
          methods: {
              signin: function(){
                  axios.post('/signin', {
                      email: this.email,
                      password: this.password
                  })
                  .then((response) =&gt; {
                      console.log(response);
                      const token = response.data.token;
                      localStorage.setItem('token', token);
                  }).catch((error) =&gt; console.log(error));
              }
          }
      }
  &lt;/script&gt;
  </code></pre>