Data on navbar only appears after refreshing

Im using vuex for my logIn, but it isnt loading after the callback, and i need to refresh the page

My App.vue

axios.get(process.env.VUE_APP_API_URL + '/api/', config).then((res) => {
    this.$cookies.set('user', res.data);
    Vue.set(this.$store.state, 'user', res.data)
}).catch(function (error) {
    if (error.response) console.log(error.response.data);
});

My store.js

export default new Vuex.Store({
  state: {
    user: {
      id,
      avatar,
      name,
      tag,
      discriminator,
      email
    },
  }
})

My index.vue

<script>
export default {
    name: 'Navbar',
    computed: {
        user () {
            return this.$store.state.user;
        }
    },
}
</script>

Expected:

1. Before login: Login button;
2. After login: My username.

What happens:

1. Before login: Login button;
2. After login: Login button;
3. After refresh: My username.