Ошибка при вызове мутации vuex из компонента vue

Есть глобальной store, в котором state = текущее состояние, мутация CHANGE_CURRENT_MENU меняет текущее состояние. Есть компонент NavMenu, в котором вызываю мутацию CHANGE_CURRENT_MENU и передаю в качестве параметра строку (название элемента, по которому произошел клик) => получаю ошибку: this.CHANGE_CURRENT_MENU is not a function

В чем проблема?

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)


export default new Vuex.Store({

state: {
    currentNav: 'interior',
    showMenu: false
},
getters:  {
    NAV_LINKS: (state) => {
        let links = {
            interior: [
                {
                    url: './assets/img/gallery/1.jpg',
                    name: 'interior',
                    route: {name: 'Gallery', params: {}},
                    active: ['Company']
                },
                {
                    url: './assets/img/gallery/2.jpg',
                    name: 'interior',
                    route: {name: 'Gallery', params: {}},
                    active: ['Company']
                }
            ],
            exterior: [
                {
                    url: './assets/img/gallery/3.jpg',
                    name: 'exterior',
                    route: {name: 'Gallery', params: {}},
                    active: ['Company']
                },
                {
                    url: './assets/img/gallery/4.jpg',
                    name: 'exterior',
                    route: {name: 'Gallery', params: {}},
                    active: ['Company']
                },
                {
                    url: './assets/img/gallery/5.jpg',
                    name: 'exterior',
                    route: {name: 'Gallery', params: {}},
                    active: ['Company']
                },
               
            ],
            vr: [
                {
                    url: './assets/img/gallery/6.jpg',
                    name: 'vr',
                    route: {name: 'Gallery', params: {}},
                    active: ['Company']
                },
                {
                    url: './assets/img/gallery/7.jpg',
                    name: 'vr',
                    route: {name: 'Gallery', params: {}},
                    active: ['Company']
                },
                {
                    url: './assets/img/gallery/8.jpg',
                    name: 'vr',
                    route: {name: 'Gallery', params: {}},
                    active: ['Company']
                },
               
            ],
            animation: [
                {
                    url: './assets/img/gallery/9.jpg',
                    name: 'animation',
                    route: {name: 'Gallery', params: {}},
                    active: ['Company']
                },
                {
                    url: './assets/img/gallery/10.jpg',
                    name: 'animation',
                    route: {name: 'Gallery', params: {
                    }},
                    active: ['Company']
                },
                {
                    url: './assets/img/gallery/11.jpg',
                    name: 'animation',
                    route: {name: 'Gallery', params: {
                    }},
                    active: ['Company']
                },
               
            ],
        }


        if (state.currentNav === 'interior') 
        return links.interior

        else return links.exterior
    }
},

mutations: {
    CHANGE_CURRENT_MENU(state, value) {
       state.currentNav = value
}

}
})

Компонент:

<template>
    <div class="nav-menu">
        <ul class="accordion" v-for="(work, index) of works"
        :key="`${work}_${index}`"
        >
            <li @click="openSubmenu(index)">
              <div class="accordion__title"
              >{{work.name}}</div>
              <ul :class="['accordion__submenu submenu', {'hidden' : index !== activeIndex}]">
            <li 
                class="submenu submenu__item"
                v-for="category in work.categories"
                :key="`${category}_${category}`"
                @click="getCategoriesItem(category)"
                >{{category}}
                
                </li>
                 
              </ul>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
    name: 'NavMenu',
    data: () => ({
        activeIndex: null,
        category: '',
        works: [
            {name: 'archetecture', categories:  ['interior', 'exterior', 'vr', 'animation']},
            {name: 'not archetecture', categories:  ['commrcial', 'video', '3D art']}
        ]
    }),
    computed: {
    ...mapGetters(['NAV_LINKS']),
    ...mapMutations(['CHANGE_CURRENT_MENU'])

    },
    methods: {
        openSubmenu(id) {
            this.activeIndex = this.activeIndex === id ? null : id
        },
        getCategoriesItem(navItem) {
            this.CHANGE_CURRENT_MENU(navItem)
        },
    }
}
</script>