title: v-if not reactive for navigation bar
body: <p>I have a nav bar that has this template:</p>
  
  <pre><code>&lt;nav v-bind:class="active" v-on:click&gt;
   &lt;v-btn v-on:click.prevent="signOut()" v-if="isLoggedIn"&gt;Sign Out&lt;/v-btn&gt;
   &lt;router-link v-on:click.native="makeActive('home')" to="/home" v-if="isLoggedIn" class="home"&gt;Home&lt;/router-link&gt;
   &lt;router-link v-on:click.native="makeActive('sign_up')" to="/sign_up" v-if="isLoggedIn" class="sign_up"&gt;Sign Up&lt;/router-link&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>As you can see I use the <code>v-if</code> directive. And it's checking for logged in status. </p>
  
  <p><code>isLoggedIn</code></p>
  
  <pre><code>    data () {
        return {
          active: 'home',
          isLoggedIn: this.$store.getters.isLoggedIn
        }
      }
  </code></pre>
  
  <p>So, I'm reading from the vuex store in order to get that value. But when the state of the store changes my navbar doesn't reactively update instead I have to refresh the page in order for elements to appear or disappear. </p>
  
  <h3>VUEX STORE</h3>
  
  <pre><code>const state = {
    isLoggedIn: !!localStorage.getItem("token")
  };
  
  const getters = {
    isLoggedIn: state =&gt; {
      return state.isLoggedIn;
    }
  }
  
  const mutations = {
    [LOGIN] (state) {
      state.pending = true;
    },
    [LOGIN_SUCCESS] (state, response) {
      localStorage.setItem("token", response.data.jwt)
    },
    [LOGOUT](state) {
      localStorage.removeItem("token")
      state.isLoggedIn = false
    }
  };
  </code></pre>
  
  <p>Why is this method not making the navbar update reactively  </p>