How to full state before going throw script in component vue

Question

Mey be it is simple, but I'm new in frontend. I have a page component. And I need to fetch data before component calculated.

import {mapActions, mapGetters} from 'vuex'
    
    export default {
    name: "notFoundPage",
      methods: {
        ...mapActions([
          'GET_SUBCATEGORIES_FROM_CATEGORIES'
        ]),
      },
      computed: {
        ...mapGetters([
            'SUBCATEGORIES'
            ]),
        subCategories() {
            // doing some calculations with already updated SUBCATEGORIES in store
            }
            return result;
        }
      },
      created() {
        this.GET_SUBCATEGORIES_FROM_CATEGORIES() 

> **// from here we go to store**

      },
      mounted() {
        this.GET_SUBCATEGORIES_FROM_CATEGORIES()
      }
    }

store:

        let store = new Vuex.Store({
            state: {
                categories: [],
                subcategories: []
            },
            mutations: {
                SET_CATEGORIES_TO_STATE: (state, categories) => {
                    state.categories = categories;
                },
                SET_SUBCATEGORIES_TO_STATE: (state, subcategories) => {
                    state.subcategories = subcategories;
                }
            },
            actions: {
                GET_CATEGORIES_FROM_API({commit}) {
                    return axios('http://localhost:3000/categories',
                        {
                            method: "GET"
                        })
    

But here compiler returns to component. I do not have any idea, why it is not finishing this action. And after calculating the computed block in component it returns to this point. But I need 'SET_CATEGORIES_TO_STATE' already updated

    .then((categories) => {
                            commit('SET_CATEGORIES_TO_STATE', categories.data)
                        return categories;
                    }).catch((error) => {
                        console.log(error);
                        return error;
                    })
                },
                GET_SUBCATEGORIES_FROM_CATEGORIES({commit}) {
                    this.dispatch('GET_CATEGORIES_FROM_API').then(categories => {
                        let subs = categories.data.map(function(category) {
                            return category.subcategories.map(function(subcategory) {
                                return subcategory.name
                            })
                            })
                        commit('SET_SUBCATEGORIES_TO_STATE', subs)
                        return subs
                    })
                }
            },
            getters: {
                CATEGORIES(state) {
                    return state.categories;
                },
                SUBCATEGORIES(state) {
                    return state.subcategories;
                }
            }

Answer 1

if you have difficulties with timings and async tasks, why don't you use async/await?

you want to wait in a async function (for example calling a backend for data) till the data is fetched. then you want to manipulate/delete/change/add, do what ever you want with that data and display the result on screen.

the point is, Vue is a reactive Framework, which means it rerenders (if the setup is correct made) the content by itself after what ever calculation is finished. so don't worry about something like that.

to be honest, the question is asked really weird. and your code is hard to read. sometimes moving two steps back and try a other way isn't false as well.