Javascript 如何在严格模式下修复表单输入和vuex的双向绑定

我在我的组件中有一个计算属性（ItemInvot），它无法运行，直到我热重新加载我的Web包开发服务器。 此外，我无法使用表单输入更改数量

我已经按照中的步骤进行了操作，但我的代码仍然存在问题

<template>
  <div class="FoodItemCard">
    <div class="card-header">
      <img :src="foodItem.imgSrc" alt="food-image">
    </div>
    <div class="card-body">
      <h3 class="title">{{ foodItem.title }}</h3>
      <p class="desc">{{ foodItem.desc }}</p>
      <span class="price">GHS {{ foodItem.price }}</span>
      <div class="card-action-row">
        <div v-if="itemInCart" class="qty-row">
          <span class="qty-title">Quantity</span>
          <div class="qty-action-row">
            <input type="number" min="1" class="qty-input" v-model.trim.number="qty">
            <button class="remove-btn" @click="removeFromCart">&minus;</button>
          </div>
        </div>
        <button v-else class="add-to-cart-btn" @click="addToCart">Add To Cart</button>
      </div>
    </div>
  </div>
</template>

编辑：setItemQuantity vuex

/**
     * 
     * @param {Object} state 
     * @param {Object} payload 
     *    object that holds the [id] and new quantity([qty]) to set
     */
    setItemQuantity(state, payload) {
      if(state.cartItems[payload.id] && typeof payload.qty === 'number') {
        state.cartItems[payload.id].qty = payload.qty
      }
    },

我希望代码将

输入的值更改为我键入的新值（即：数量）。相反，它会忽略我键入的内容，并坚持其旧值。
我还希望在我将项目添加到购物车中/从购物车中删除项目后，ItemInNot会立即重新计算，而不是等待我在重新计算之前热加载webpack dev服务器
显示突变的代码
setItemQuantity
，please@acdcjunior添加了变异，所以我才意识到计算结果实际运行并更改为true（当我单击“添加到购物车”时），但模板不会重新呈现以反映更改
/**
     * 
     * @param {Object} state 
     * @param {Object} payload 
     *    object that holds the [id] and new quantity([qty]) to set
     */
    setItemQuantity(state, payload) {
      if(state.cartItems[payload.id] && typeof payload.qty === 'number') {
        state.cartItems[payload.id].qty = payload.qty
      }
    },