asyncData() or fetch() does not work async, but in mounted it works correctly

Question

I'm enough. I spent a few hours, but cant figure out how it works. My code works in SPA by the mounted() hook, but I migrate to nuxt now and faced with problems.

I'm trying to get data from store by asyncData()

async asyncData({store}) {
console.log("start getting schools")
const schools = await store.dispatch('GET_SCHOOLS_FROM_API').then((schools) => {
  console.log(schools)
})
console.log(schools + " schools")     
return schools
 },

or fetch()

async fetch({store}) {
const sch = await store.dispatch('GET_SCHOOLS_FROM_API')
  this.schools = store.SCHOOLS; //SCHOOLS is a getter in store  
});
},

but it does not wait for dispatch to complete and returns undefind.

store:

async GET_SCHOOLS_FROM_API({ commit }) {
    return axios.get('http://localhost:3000/schools').then((schools) => {
        commit('SET_SCHOOLS_TO_STATE', schools.data)
        return schools;
    }).catch((error) => {
        console.log(error);
        return error;
    })
}

does somebody have an idea where I am wrong?

Answer 1

the thing was, that I did not remove data() from a component, and it was a mistake. After that, the code above works correctly