Updating store relationship using axios / Vuex



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')
        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 )


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

mutations: {

        NEW_SUBMENU (state,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) {




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