title: Vuex state change doesn't make component re-render?
body: <p>I have a navbar which has conditional rendering depending on authentication:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="routing"&gt;
      &lt;b-navbar variant="light" type="light"&gt;
        &lt;b-navbar-brand&gt;
          &lt;img id="drage" src="../assets/icon.svg"/&gt;
          &lt;b-nav-text id="txt"&gt;
            drac1
          &lt;/b-nav-text&gt;
          &lt;div v-if="loggedIn === true"&gt;
            &lt;router-link id="link" to="/" exact&gt;
              Home
            &lt;/router-link&gt;
            &lt;router-link id="link" to="configuration" exact&gt;
              Config
            &lt;/router-link&gt;
            &lt;b-nav-text id="hellotext"&gt;
              Hello, {{ username }}
            &lt;/b-nav-text&gt;
          &lt;/div&gt;
        &lt;/b-navbar-brand&gt;
      &lt;/b-navbar&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'topnavbar',
      data () {
        console.log(this.$store.state.loggedIn) // Changes from false to true as it is supposed to, and logs it. 
        return {
          username: this.$store.state.username,
          loggedIn: this.$store.state.loggedIn
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>THe value <code>loggedIn</code> which the conditional render depends upon does change from <code>false</code> to <code>true</code> when the user has logged in. However, the <code>router-link</code> items as well as the username nav text never show up.</p>
  
  <p>Why doesn't a change in store state trigger a re-render of the navbar in this case? </p>