title: Navbar not updating on successful User Signin
body: <p>I am building my first Vue-Cli 3 project with a Rails 6 Api as the backend. </p>
  
  <p>I have a nav component that is supposed to update on successful user sign in, right now when a user signs in it redirects to the user dashboard but the nav stays as the logged nav view. It will successfully change when I force refresh the page. </p>
  
  <p>Being so new to Vue this could be a small issue, however I am struggling to find any references on this issue. </p>
  
  <p>I am using Axios Axios-Vue and JWTSessions to handle the tokens / sessions</p>
  
  <p>here is my Navigation.vue component code: </p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="font-sans antialiased"&gt;
      &lt;nav class="flex items-center justify-between flex-wrap bg-loadze-blue p-6 fixed w-full"&gt;
        &lt;div class="flex items-center flex-no-shrink text-gray-900 mr-6"&gt;
          &lt;span class="font-semibold text-xl tracking-tight text-white"&gt;Loadze.co&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="block sm:hidden"&gt;
          &lt;button @click="toggle" class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white"&gt;
            &lt;svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"&gt;&lt;title&gt;Menu&lt;/title&gt;&lt;path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/&gt;&lt;/svg&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div :class="open ? 'block': 'hidden'" class="w-full flex-grow sm:flex sm:items-center sm:w-auto"&gt;
          &lt;div class="text-sm sm:flex-grow"&gt;
            &lt;router-link to="/home" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()"&gt;Home&lt;/router-link&gt;
            &lt;router-link to="/about" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()"&gt;About&lt;/router-link&gt;
            &lt;router-link to="/features" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()"&gt;Features&lt;/router-link&gt;
            &lt;router-link to="/pricing" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()"&gt;Pricing&lt;/router-link&gt;
            &lt;router-link to="/contact" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()"&gt;Contact Us&lt;/router-link&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;router-link to="/signup" class="text-sm no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()"&gt;Sign up&lt;/router-link&gt;
            &lt;router-link to="/signin" class="text-sm no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()"&gt;Sign in&lt;/router-link&gt;
            &lt;a href="#" @click.prevent="signOut" class="text-sm no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="signedIn()"&gt;Logout&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Navigation',
    data () {
      return {
        open: false
      }
    },
    methods: {
      toggle () {
        this.open = !this.open
      },
      setError (error, text) {
        this.error = (error.response &amp;&amp; error.response.data &amp;&amp; error.response.data.error) || text
      },
      signedIn () {
        return localStorage.signedIn
      },
      signOut () {
        this.$http.secured.delete('/signin')
          .then(response =&gt; {
            delete localStorage.csrf
            delete localStorage.signedIn
            this.$router.replace('/')
          })
          .catch(error =&gt; this.setError(error, 'Can not sign out'))
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>and this is the Signin.vue component (script the form code is long.. please let me know if you need to see it) code:</p>
  
  <pre><code>&lt;script&gt;
  export default {
    name: 'Signin',
    data () {
      return {
        email: '',
        password: '',
        error: ''
      }
    },
    created () {
      this.checkSignedIn()
    },
    updated () {
      this.checkSignedIn()
    },
    methods: {
      signin () {
        this.$http.plain.post('/signin', { email: this.email, password: this.password })
          .then(response =&gt; this.signinSuccessful(response))
          .catch(error =&gt; this.signinFailed(error))
      },
      signinSuccessful (response) {
        if (!response.data.csrf) {
          this.signinFailed(response)
          return
        }
        localStorage.scrf = response.data.csrf
        localStorage.signedIn = true
        this.error = ''
        this.$router.replace('/dashboard')
      },
      signinFailed (error) {
        this.error = (error.response &amp;&amp; error.response.data &amp;&amp; error.response.data.error) || ''
        delete localStorage.csrf
        delete localStorage.signedIn
      },
      checkSignedIn () {
        if (localStorage.signedIn) {
          this.$router.replace('/dashboard')
        }
      }
    }
  }
  &lt;/script&gt;
  </code></pre>