Почему не работает bundle.products?

Question

[Hfnas]

Имеется интерфейс калькулятора.

FormProductList.vue

<template>
       <div v-if="totalFormProducts" >
            yes
        </div>
    <fieldset class="products">
            <FormProductItem
                v-for="item in bundle.products"
                :key="item.id"
                :form-product="item"/>
    </fieldset>
</template>

<script>
    import FormProductItem from "./FormProductItem.vue";
    import {mapActions, mapMutations, mapState} from "vuex";
    export default {
      name: "FormProductList",
      components: {FormProductItem},
      computed: {
        ...mapState("calc", ["bundle", "menu"])
      },
      methods:{
        ...mapActions("calc", ["removeFormProduct"]),
      }
    }
</script>

FormProductItem.vue

<template>
    <div class="row">    
           <div class="item-name">{{formProduct.name}}</div>    
            <div><span class="remove-link" @click="removeFormProduct(formProduct.id)"></span></div>
    </div>
<template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  data() {
    return {
      quantity: 1
    }
  },
  name: "FormProductItem",
  props: {
    formProduct: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
        this.quantity = this.formProduct.quantity;
  },
  computed: {
    ...mapState("calc", ["bundle"]),
  },
  methods: {
    ...mapActions("calc", ["removeFormProduct"]),
    updateQuantity() {
        if (this.quantity==0){
            this.removeFormProduct(this.formProduct.id);
        }else {
            this.formProduct.quantity = this.quantity;
        }
    },
  }
}
</script>

calc.js

import axios from "axios";
import { toRaw } from 'vue';
import {StatusCodes} from "http-status-codes";
import {apiConfig, apiConfigPatch, formConfig} from "../../../utils/settings.js";

function getAlertStructure() {
    return {
        type: null,
        message: null
    };
}

const state = () => ({
    bundle: {
        "products": [],
    },
});

const actions = {
    async removeFormProduct({ state, commit, dispatch }, FormProductId) {
        let index=state.bundle.products.findIndex(e => e.id == FormProductId);
        // console.log("index"+index);
        delete state.bundle.products[index];

        commit('setProducts', state.bundle.products);
        commit('getBundlesProducts');
    },
};
const getters = {
    totalFormProducts(state) {
        if (!state.bundle.products) {
            return 0;
        }
        return state.bundle.products.length;
    },
    getBundlesProducts(state){
       return [...state.bundle.products]
    }
};
const mutations = {
    setProducts(state, products){
        state.bundle.products=products;
    },
    setProductToForm(state, value) {
        let id=value.id;
        let products=state.bundle.products;
        let index=products.findIndex(x => x.id === id);

        if (index!=-1){
            state.bundle.products[index].quantity=state.bundle.products[index].quantity+1;
        }else{
            state.bundle.products.push({
                    "id": value.id,
                    "price": value.price,
                    "quantity": 1,
                    "maxQuantity": value.quantity,
                    "name": value.name,
                    "images": value.images
            });
        }
    },
};
</script>

ProductItem.vue

<template>
    <div class="calc-item" :title="product.name" @click="setProductToForm(product)">
        <div class="name">{{product.name}}</div>
    </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from "vuex";

export default {
  name: "ProductItem",
  props: {
    product: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState("calc", ["menu"]),
  },
  methods: {
    ...mapMutations("calc", ["setProductToForm"]),
  };

У меня не работают две вещи:
1)Не удаляется элемент с помощью функции "removeFormProduct", возникает ошибка "Uncaught (in promise) Error: [vuex] do not mutate vuex store state outside mutation handlers." Не удаляется элемент products . Почему?
2)Когда я кликаю на компоненту ProductItem, функция setProductToForm(product) первый раз, срабатывает добавление (те добавляется в массив bundle.products). При повторном клике на setProductToForm(product), почему то количество не прибавляется.
3) Неправильно выводится секция при наличии (т.е. state.bundle.products.length>0)

<div v-if="totalFormProducts" >
            yes
</div>