title: Vue Cookies .get('token') returning null
body: <p>My project is using vuex, axios, vue-cookies and JWTs. I have a file called api.js which is imported into my main vue js, api.js code below;</p>
  <pre><code>import axios from 'axios'
  import Vue from 'vue'
  import { store } from &quot;@/store&quot;;
  
  export default axios.create({
      baseURL: store.state.endpoints.baseUrl,
      headers: {
          Authorization: `JWT ${Vue.$cookies.get('token')}`,
          'Accept': 'application/json',
          'Content-Type': 'application/json'
      }
  })
  </code></pre>
  <p>When I login via my login page everything appears successful. In the inspector the cookie 'token' value updates correctly with the new token, Vuex updates to show that the user isAuthenticated and the router redirects me to the homepage.
  Once on the homepage, if I try to navigate to a page that makes any call which requires authentication, in the header it passes 'JWT null' instead of the token in the cookie and fails and I end up in a perpetual cycle of successfully logging in but not able to go anywhere.</p>
  <p>If I login and then refresh the page before doing anything else, everything works as expected and the JWT is no longer null.
  It appears that the api.js code at the top of this question is not correctly pulling the token from the cookie each time it's called but only on page refresh, is this being cached or do I need to somehow reload this import after login?</p>
  <p>For reference, a snippet of code from my login page to show how the data is being updated after login;</p>
  <pre><code>  api.post(this.$store.state.endpoints.obtainJWT, payload)
        .then((response) =&gt; {
          console.log(&quot;Token - &quot;+response.data.token);
          console.log(&quot;Profile - &quot;+response.data.user);
          this.$cookies.set('token', response.data.token);
          this.$store.commit(&quot;setAuthUser&quot;,
              {authUser: response.data, isAuthenticated: true})
        })
        .then(() =&gt; this.$router.push({path: '/'}))
        .catch((error) =&gt; {
          console.log(&quot;Error!&quot;);
          console.log(error);
          console.debug(error);
          console.dir(error);
        })
  </code></pre>
  <p>and an example of an api call which contains 'JWT null' if accessed before refreshing the page;</p>
  <pre><code>import api from &quot;../api.js&quot;;
  ...
  api.get(&quot;/data_full/&quot; + id)
    .then((response) =&gt; {
      this.title = response.data.title;
    })
  </code></pre>
  <p>and in my projects main.js, the api.js import;</p>
  <pre><code>...
  import api from './api.js'
  ...
  Vue.$http = api;
  </code></pre>