title: How to fix two-way binding with form input and vuex in strict mode
body: <p>I have a computed property(<em>itemInCart</em>) in my component which fails to run, until i hot reload my webpack dev server.
  Also, I am not able to change the quantity(<em>qty</em>) using the form input</p>
  
  <p>I have followed the steps in the <a href="https://vuex.vuejs.org/guide/forms.html" rel="nofollow noreferrer">vuex docs concerning 2-way binding with forms</a> but still have an issue with my code.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="FoodItemCard"&gt;
      &lt;div class="card-header"&gt;
        &lt;img :src="foodItem.imgSrc" alt="food-image"&gt;
      &lt;/div&gt;
      &lt;div class="card-body"&gt;
        &lt;h3 class="title"&gt;{{ foodItem.title }}&lt;/h3&gt;
        &lt;p class="desc"&gt;{{ foodItem.desc }}&lt;/p&gt;
        &lt;span class="price"&gt;GHS {{ foodItem.price }}&lt;/span&gt;
        &lt;div class="card-action-row"&gt;
          &lt;div v-if="itemInCart" class="qty-row"&gt;
            &lt;span class="qty-title"&gt;Quantity&lt;/span&gt;
            &lt;div class="qty-action-row"&gt;
              &lt;input type="number" min="1" class="qty-input" v-model.trim.number="qty"&gt;
              &lt;button class="remove-btn" @click="removeFromCart"&gt;&amp;minus;&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;button v-else class="add-to-cart-btn" @click="addToCart"&gt;Add To Cart&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And the computed and methods section of the <em></em></p>
  
  <pre><code>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 =&gt; state.cartItems
      })
    },
    methods: {
      addToCart() {
        this.$store.commit('addToCart', this.foodItem)
      },
      removeFromCart() {
        // console.log('hello');
        this.$store.commit('removeFromCart', this.foodItem.id)
      }
    }
  </code></pre>
  
  <p>EDIT: setItemQuantity vuex mutation</p>
  
  <pre><code>/**
       * 
       * @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] &amp;&amp; typeof payload.qty === 'number') {
          state.cartItems[payload.id].qty = payload.qty
        }
      },
  </code></pre>
  
  <p>I expect the code to change the <code>input</code>'s value to the new value I type (ie: <em>qty</em>). It instead ignores what I type and sticks to its old value.
  I also expect the <em>itemInCart</em> to recompute as soon as i add/remove the item to/from the cart, and not wait for my to hot reload the webpack dev server before recomputing</p>