Problem: Axios overriding default Header

I am very new to VueJS, so take my problem as a newbie problem.

I have created vue-cli app.

In axios/index.js :

import axiosApi from 'axios'
import store from '../store'

const axios = axiosApi.create({
  baseURL: "http://fhospital.test/api",
  headers: {
    "Accept": "application/json",
    "Authorization": `Bearer ${store.state._token}`
  },
});

export default axios;

In main.js :

import axios from './axios';
Vue.prototype.$axios = axios

In Login.vue :

 methods : {
      login() {
        this.loading = true;
        this.$axios.post('/auth/login', {data: this.data})
        .then(res => {
          if(res.data.success) {
            this.$store.commit('setToken', res.data.token);
            this.$axios.defaults.headers.common.Authorization = `Bearer ${res.data.token}`;
            this.$router.push('/');
          }
        });
      },
}

The problem is, the default Authorization header is not being updated through the login() method. It shows null as it was initially instantiated. But if I manually reload the browser page, the header token is updated.

How can I update that header of that axios instance?