Splice out nested object from vuex object

vuex

#1

Hay, i have dynamic navbar that a user can add button to, the is what the api is returning using axios

[
{
id: 20,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "support@linxtter.com",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 00:50:44",
updated_at: "2019-02-09 00:50:44",
submenu: [
{
id: 34,
navigation_id: 20,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "support@linxtter.com",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 00:58:33",
updated_at: "2019-02-09 00:58:33",
},
{
id: 35,
navigation_id: 20,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "support@linxtter.com",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 01:02:04",
updated_at: "2019-02-09 01:02:04",
},
{
id: 36,
navigation_id: 20,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "support@linxtter.com",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 01:02:06",
updated_at: "2019-02-09 01:02:06",
},
],
},
{
id: 39,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "support@linxtter.com",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 04:03:17",
updated_at: "2019-02-09 04:03:17",
submenu: [ ],
},
{
id: 47,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "support@linxtter.com",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 05:54:03",
updated_at: "2019-02-09 05:54:03",
submenu: [
{
id: 113,
navigation_id: 47,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "support@linxtter.com",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 06:01:26",
updated_at: "2019-02-09 06:01:26",
}
],
},
{
id: 48,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "support@linxtter.com",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 06:02:08",
updated_at: "2019-02-09 06:02:08",
submenu: [
{
id: 121,
navigation_id: 48,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "support@linxtter.com",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 06:09:13",
updated_at: "2019-02-09 06:09:13",
},
{
id: 122,
navigation_id: 48,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "support@linxtter.com",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 06:10:42",
updated_at: "2019-02-09 06:10:42",
},
],
},
]

im removing btns from the nested submenu : [] object but its not splicing the object on vuex navbar object

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex, axios);

export const store = new Vuex.Store({

    state:{

        navbtns : [], // top navigation btns
    
    },

    mutations: {

        REMOVE_SUBBTN : (state, index) => {

            state.navbtns.submenu.splice(index, 1);

            Event.$emit('requestAlertSuccess');

        },

     },

    },

    actions: {
        deleteSubmenuBtn (context, [id, index]){

            axios.delete('/admin/designer/api/submenu/destroy/'+id)

                .then( response => {

                    context.commit('REMOVE_SUBBTN', index)
                    
                })

                .catch( error => {

                    console.log(error);

                    Event.$emit('requestAlertDanger');

                })

        },
    },
 })

Surelly, state.navbtns.submenu.splice(index, 1); So my question is how to splice out a specific row from submenu:[] nested object from withen vuex navbtns store object.