I am trying to delete an item from the cart. So I should be able to delete the item with the id of the cart. I have a cartHelper and there I defined my api call:

removeFromCart: function (id, callback = undefined) {
        return apiHelper.deleteRequest(
            `/carts/${this.cookieValue}/remove-item`,
            (response) => {
                document.cookie = `${this.cartCookieName}=${response.data.attributes.cart_guid};`;
                if (callback) { callback(response); }
            },
            {
                id: id
            }
        )
    },

And later I am calling this function in my Cart component:

methods: {
    removeFromCart(id) {
        cartHelper.removeFromCart(id, () => {
            this.$store.dispatch('removeProductFromCart', id)
        });
    },
},

And I defined my action like in the below:

export const removeProductFromCart = ({ commit }, id) => {
    commit('REMOVE_PRODUCT_FROM_CART', id);
}

And here is my mutation:

export const REMOVE_PRODUCT_FROM_CART = (state, id) => {
    state.cart = state.cart.filter(item => {
        return item.id !== id;
    })
}

But as soon as I click the button, where I am calling removeFromCart in my Cart component, I am getting "TypeError: _vm.removeProductFromCart is not a function" and I couldn't figure out the reason. If you can help me, that would be great.

Edited version--------- Here is my state:

export default {
    cart: {
        "attributes": {
            "items": [],
        }
    }

And my index.js for store:

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

Vue.use(Vuex);

import state from "./state";
import * as getters from './getters';
import * as mutations from "./mutations";
import * as actions from "./actions";

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
});

}