Как исправить двустороннее связывание с вводом формы и vuex в строгом режиме

Question

У меня есть вычисляемое свойство ( itemInCart ) в моем компоненте, которое не запускается, пока я не перезагружу свой сервер разработки веб-пакетов.Кроме того, я не могу изменить количество ( кол-во ) с помощью формы ввода

Я следовал инструкциям в документах vuex, касающихся двухстороннего связывания с формами но все еще есть проблема с моим кодом.

<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>

И секция вычислений и методов

computed: {
    qty: {
      cache: false,
      get() {
        return this.cartItems[this.foodItem.id].qty
      },
      set(val) {
        this.$store.commit('setItemQuantity', this.foodItem.id, val)
      }
    },
    itemInCart: {
      cache: false,
      get() {
        if(this.cartItems) {
          if(this.cartItems[this.foodItem.id]) return true
          else return false
        }
        return false
      }
    },
    ...mapState({
      cartItems: state => state.cartItems
    })
  },
  methods: {
    addToCart() {
      this.$store.commit('addToCart', this.foodItem)
    },
    removeFromCart() {
      // console.log('hello');
      this.$store.commit('removeFromCart', this.foodItem.id)
    }
  }

РЕДАКТИРОВАТЬ: setItemQuantity vuex mutation

/**
     * 
     * @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
      }
    },

Я ожидаю, что код изменит значение input на новое значение I типа (то есть: кол-во ).Вместо этого он игнорирует то, что я печатаю, и придерживается своего старого значения.Я также ожидаю, что itemInCart будет повторно вычислен, как только я добавлю / удалим элемент в / из корзины, и не буду ждать, пока мой компьютер перезагрузит dev-сервер webpack, прежде чем повторно вычислять