Laravel + Vuejs have trouble with async problem

I have a async problem with my Vuejs/Laravel App.

If a user is connected i have in vuex : my state user and a state token. I set this token in the localStorage and with that i can relogin him if my user F5 (refresh page).

There is my store (namespaced:auth) :

export default {
    namespaced: true,
    state: {
        token: null,
        user: null
    },
    getters: {
        authenticated(state){
            return state.token && state.user;
        },
        user(state){
            return state.user;
        }
    },
    mutations: {
        SET_TOKEN(state, token){
            state.token = token;
        },
        SET_USER(state, data){
            state.user = data;
        },
    },
    actions: {
        async login({ dispatch }, credentials){
           let response = await axios.post(`/api/auth/connexion`, credentials);

           dispatch('attempt', response.data.token);
        }
        , 
        async attempt({ commit, state }, token) {
            if(token){
                commit('SET_TOKEN', token);
            }
            if (!state.token){
                return
            }
            try{
                let response = await axios.get(`/api/auth/me`);
                commit('SET_USER', response.data);
                console.log('Done')
            }
            catch(err){
                commit('SET_TOKEN', null);
                commit('SET_USER', null);
            }
        }
    }
}

My app.js, i do that for relog my current user :

store.dispatch('auth/attempt', localStorage.getItem('token'));

And for finish on route in router :

{
    name: 'Login',
    path: '/',
    component: Login,
    beforeEnter: (to, from, next) => {
      console.log('Getter in router : ' + store.getters['auth/authenticated']);
      if (!store.getters['auth/authenticated']){
        next()
      }else {
        return next({
          name: 'Home'
        })
      }
    }
  }

Where is the problem, if i call in a Home.vue my getter "authenticated" is work fine (true if user connect and false if not).

But in my router is take all time default value set in store (null). I know why is because if i reload my page for 0.5s the store state is null and after that the localStorage is learn and my user and token is created.

What i want (i think) is the router wait my actions attempt and after that he can do check.

I have follow a tutoriel https://www.youtube.com/watch?v=1YGWP-mj6nQ&list=PLfdtiltiRHWF1jqLcNO_2jWJXj9RuSDvY&index=6

And i really don't know what i need to do for my router work fine =(

Thanks a lot if someone can explain me that !

Update :

If i do that is work :

{
    name: 'Login',
    path: '/',
    component: Login,
     beforeEnter:async (to, from, next) => {
      await store.dispatch('auth/attempt', localStorage.getItem('token'));

      if (!store.getters['auth/authenticated']){
        next()
      }else {
        return next({
          name: 'Home'
        })
      }
    }

But i want to understand what i really need to do because that is not a clear way is really trash.

Update2:

Maybe i found the best solution if someone have other way i take it.

{
    name: 'Home',
    path: '/accueil',
    component: Home,
    beforeEnter: (to, from, next) => {
      store.dispatch('auth/attempt', localStorage.getItem('token')).then((response) => {
        if (!store.getters['auth/authenticated']){
          return next({
            name: 'Login'
          })
        }else {
          next();
        }
      });
    }
  }