VueJS 3 with Vuex 4: State is not updating

I'm new to vueJS and i'm trying to make a dynamic submenu in a 'Header' component.

App.vue

<template>
    <div>
        <Header />

        <router-view />

        <Footer />
    </div>
</template>

I use the store from Vuex to set a global state for my submenu items

store/index.js:

import { createStore } from 'vuex'

export default createStore({
    state: {
        cats_sub_menu: []
    },

    mutations: {
        SET_SUB_MENU(state, payload) {
            state.cats_sub_menu = payload;
       }
    },

   actions: {
       setSubMenu({ commit }, payload) {
          commit("SET_SUB_MENU", payload)
       }
   },
})

And i set up my Header component:

<template>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <router-link class="navbar-brand" to="/">Test Website</router-link>
            <button
                class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li>
                        <router-link
                            class="nav-link"
                            active-class="active"
                            to="/page/about-us"
                            >About</router-link
                        >
                    </li>
                    <li class="nav-item dropdown">
                        <a
                            class="nav-link dropdown-toggle"
                            href="#"
                            id="navbarDropdown"
                            role="button"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                        >
                            Blog
                        </a>
                        <div
                            class="dropdown-menu"
                            aria-labelledby="navbarDropdown"
                        >
                            <router-link
                                class="dropdown-item"
                                active-class="active"
                                v-for="{ blogCat, i } in blog_sub_menu"
                                :key="i"
                                to="blog"
                                >{{ blogCat.title_el }}</router-link
                            >
                        </div>
                    </li>
                    <li>
                        <router-link
                            class="nav-link"
                            active-class="active"
                            to="/page/contact"
                            >Contact</router-link
                        >
                    </li>
                </ul>
            </div>
        </nav>
    </header>
</template>


<script>
    import { computed } from "vue";
    import axios from "axios";
    import store from "../../../store";
    export default {
        name: "Header",
        setup() {
            function setSubCatsMenu() {
                axios
                    .get(`http://127.0.0.1:5000/api/blog_category`)
                    .then((response) =>
                        store.dispatch("setSubMenu", response.data)
                    );
            }
            const blog_sub_menu = computed(() => store.state.cats_sub_menu);
            return {
                store,
                blog_sub_menu,
                setSubCatsMenu,
            };
        },
        mounted() {
            this.setSubCatsMenu();
        },
    };
</script>

I checked the api call for it's validity without any issues but still the blog_sub_menu is not updating. Does anyone have any ideas?

Cheers!

blog_sub_menu should be a computed property in order to be reactive :

import axios from "axios";
import store from "../../../store";   
import {computed} from "vue"
export default {
    name: "Header",
    setup() {
        function setSubCatsMenu() {
            axios
               .get(`http://127.0.0.1:5000/api/blog_category`)
               .then((response) =>
                (store.dispatch("setSubMenu", response.data))
            );
        }

        const blog_sub_menu =computed(()=> store.state.cats_sub_menu);

        return {
            store,
            blog_sub_menu,
            setSubCatsMenu,
        };
    },
    mounted() {
        this.setSubCatsMenu();
        this.blog_sub_menu = store.state.cats_sub_menu;
    },
};

and your v-for should be like :

 v-for="( blogCat, i ) in blog_sub_menu"