title: Show navbar menu depends on user authentication
body: <p>I have a fixed navbar component in different views.</p>
  
  <p>This navbar contain <strong>Login</strong> link which redirect to <strong>login page</strong>.</p>
  
  <p>After the user enter his correct credentials I redirect him to home page which contain the same navbar.</p>
  
  <blockquote>
    <p>What I am trying to do:</p>
  </blockquote>
  
  <p>Change the <strong>Login</strong> link in the navbar with <strong>Logout</strong> link and show the user name near it. <em>(e.g. welcome, Adam)</em></p>
  
  <blockquote>
    <p>What I have tried to do in the Navbar Component:</p>
  </blockquote>
  
  <pre><code>    &lt;template&gt;
    &lt;header&gt;
      &lt;div v-if="logged_in" class="col-lg-6 col-md-6 col-sm-6 col-xs-12  text-center text-sm-right"&gt;
        &lt;!-- header top menu --&gt;
        &lt;div class="header-top-menu"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              Welcome, {{ user.name }}
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#" @click="logout"&gt;
                Logout
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- end of header top menu --&gt;
      &lt;/div&gt;
      &lt;div v-else class="col-lg-6 col-md-6 col-sm-6 col-xs-12  text-center text-sm-right"&gt;
        &lt;!-- header top menu --&gt;
        &lt;div class="header-top-menu"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;router-link :to="{name: 'Login'}"&gt;
                Login
              &lt;/router-link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;router-link :to="{name: 'Register'}"&gt;
                Register
              &lt;/router-link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- end of header top menu --&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data: () =&gt; ({
        user: null,
        logged_in: false,
      }),
      methods: {
        logout () {
          this.$store.dispatch('logout').then((res) =&gt; {
            this.user = null;
            this.logged_in = false;
            this.$router.push({ name: 'Login'});
          });
        }
      },
      created() {
        this.$store.dispatch('userDetails').then(() =&gt; {
          this.user = this.$store.getters.getUserDetails;
          this.logged_in = true;
        });
      },
    }
  &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p>Problem and conclusion:</p>
  </blockquote>
  
  <p>After the user login I need to refresh the home page to load the user info because, I am using <code>created()</code> function.</p>
  
  <p>I think I should use <strong><em>computed property</em></strong> or <strong><em>watch</em></strong> but I am stuck.</p>