title: How to use dynamic auth-header in axios(vue.js)?
body: <p>I am building an Vue.js app that relies heavily on api calls. I am using axios to make call.
  I am using a pattern similar <a href="https://medium.com/canariasjs/vue-api-calls-in-a-smart-way-8d521812c322" rel="nofollow noreferrer">this</a>. Basically I have created a service that will be shared by all the components.
  Following is the service:</p>
  
  <pre class="lang-js prettyprint-override"><code>//api-client.js
  
  import axios from 'axios'
  import store from '../src/store'
  
  let authKey = store.getters.getAuthKey
  export default  axios.create({
    withCredentials: false, // This is the default
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      authorization: "Basic "+authKey
    }
  })
  </code></pre>
  
  <p>Now notice I am using a getter to get auth token for the vuex store and seting it in the service.</p>
  
  <p>I will use this service like:</p>
  
  <pre class="lang-js prettyprint-override"><code>//App.vue
  &lt;template&gt;
      &lt;div&gt;
         &lt;!-- some code --&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import apiClient from "../api-client.js" 
      export default {
          mounted(){
           apiClient.get("#url").then(()={
              // Do Something
  
           })
        }
      }
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>The situation is, auth key changes every now and then, so I have a setting that will update the auth key in the store.
  The setting updates the auth key in store successfully, but the key in <strong>api-client.js</strong> is not updated. It is loaded only once and the update in the store is not cascaded to this <strong>api-client.js</strong>.</p>
  
  <p>Is there any pattern to solve this? Please suggest.</p>