V-модель не реагирует в V-для

Question

Я пытаюсь отобразить список продуктов, с которыми некоторые из этих продуктов идут с начинками, эти начинки отображаются в модальном порядке вместе с их соответствующим количеством. он отображается правильно, но каждый раз, когда я пытаюсь обновить ввод, содержащий количество начинки, он не обновляется немедленно, пока не будет проверен другой элемент

<div class="modal-body">
  <br>
  <div v-for="(single,index) in currentItem.extrasheaders" :key="index" v-if="single.length !== 0">
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-8 col-8">
        <div class="row">
          <div class="col-lg-7 col-md-7 col-sm-7 col-7">
            <h5>{{single.name}}</h5>
          </div>
          <div class="col-lg-5 col-md-5 col-sm-5 col-5">
            <span class="required-extras">Required {{single.required}}</span>
          </div>
        </div>
      </div>
    </div>

    <span style="color:red;font-size:12px;" v-if="errors[single.name] < single.required">
                                    you have some fields required in this section
                                </span>

    <div class="extras-detail-options mt-10">
      <div class="row mb-15" v-for="(c,i) in single.contents" :key="i">
        <div class="col-lg-8 col-md-8 col-sm-8 col-sm-8 col-8">
          <div class="extras-detail-att">
            <div class="row" v-if="single.type === 'checkbox'">
              <div class="col-lg-7 col-md-7 col-sm-7 col-7">
                <input :type="single.type" id="" :name="c.name" v-model="checked" :value="c.name" @click="topping(c,single.name,single.type,single.required)">
                <label for="">
                                                            <span class="extra-title">{{c.name}}</span>
                                                        </label>
              </div>
              <div class="col-lg-5 col-md-5 col-sm-5 col-5">
                <span class="extra-price">{{c.price | tonumber}}</span>
              </div>
            </div>
            <div class="row" v-if="single.type === 'radio'">
              <div class="col-lg-7 col-md-7 col-sm-7 col-7">
                <input :type="single.type" id="" :name="single.name" :value="c.name" @click="topping(c,single.name,single.type,single.required)">
                <label for="">
                                                            <span class="extra-title">{{c.name}}</span>
                                                        </label>
              </div>
              <div class="col-lg-5 col-md-5 col-sm-5 col-5">
                <span class="extra-price">{{c.price | tonumber}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-4">
          <div class="qib-container">
            <button type="button" class="minus qib-button" data-type="minus" @click="decreaseToppingQty(c.id)" :disabled="c.qty < 2">-</button>
            <div class="quantity">
              <input type="number" id="quantity_5e32c1598a905" ref="" class="input-text qty text" min="1" max="30" name="quantity" :value="quantity[c.name]" title="Qty" size="4" inputmode="numeric">
            </div>
            <button type="button" class="plus qib-button" data-type="plus" @click="increaseToppingQty(c.name)">+</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>     

, это мое свойство данных

data() {
  return {
    currentItem: '',
    extrasHeaders: '',
    checked: [],
    alltoppings: [],
    errors: {},
    required: {},
    cart: '',
    quantity: {}

  }
}

это метод, отвечающий за показ начинки, относящейся к продукту, если такой предмет имеет начинки или нет

showToppings(item) {
  //if item has no toppings
  let lm = this;
  this.currentItem = item;
  //check if item exist in the cart
  const oldItem = this.$store.state.cart.cuisine
  const cartItem = oldItem.find(food => item.id === food.id)
  if (cartItem) {
    this.$noty.warning('you already have this item in your cart')
    return false;
    $('#moreModal').modal('hide')
  }
  if (this.currentItem.extrasheaders.length === 0) {
    $('#moreModal').modal('hide')
    let data = {}
    data.id = item.id
    data.name = item.name
    data.price = item.price
    data.extras = []
    data.qty = 1
    this.$store.dispatch('additemtocart', data)
    this.currentItem = ''
    this.setCart()
    //ends if item has no toppings
  } else {
    this.currentItem.extrasheaders.forEach(function(ext) {
      ext.contents.forEach(function(val) {
        val['qty'] = 1;
        lm.quantity[val.name] = 1
      })
    })
    this.currentItem.extrasheaders.forEach(ext => {
      let name = ext.name
      let req = ext.required
      this.required[name] = req
      this.errors[name] = 0
    })
    $('#moreModal').modal('show')
  }

}

этот метод отвечает за увеличение количества

increaseToppingQty(name) {
  // alert(name)
  this.quantity[name]++
}

каждый Когда я нажимаю знак плюс рядом с вводом количества ... он не обновляется сразу, пока не будет выбран другой топпинг.

спасибо в ожидании.