Updating store relationship using axios / Vuex

vuex

#1

I have a has many relationship for my app dynamic menu, I’m trying to give users the ability to add menu button. as he wishes.

the implementation that i have is not adding the submenu. its only mutating the root button set (navbtns).

//Laravel controller 
    public function index()
    {
        $navbtns = Navigation::with('submenu') // laravel will get the submenu set in the collect
                        ->where('language_id', '2')
                        ->orderBy('sort', 'asc')
                        ->get();
        return $navbtns; // this is returning correct collection and i can read it poperly with axios
    }


using axios i’m adding new records to the submenu DB ( the child not the root )

    state:{

        navbtns : [],  // this is the root menu collection whitch contains the submenu set ?
    
    },

mutations: {

        NEW_SUBMENU (state,submenu){ 

            state.navbtns.push(submenu);

        },

},
actions: {

        addNewNavbtn : function({commit}){

            axios.post('api/navbtns/store', { // axios is updating the DB record correctly here


                    name          : // ....
                    sort            : // ....
                    link_web        : // ....

                })

                .then(function (response) {

                    let newbtn = response.data;

                    commit('NEW_NAVBTNS', newbtn); 


                })

                .catch(function (error) {

                    Event.$emit('requestAlertDanger');

            });

        },
}

so basically im being able to mutate the store main button set not the submenu set,

So how can i perform this type of mutation


How to fetch db query with relationshiep using axios and vuex