How can the value change immediately after I clicked add or minus - vue.js

Question

Hi currently I am making a add & minus function and the problem I am facing is once I clicked add or minus, the value still remain the same... I use the watch property also and it still not working
The get_list is calling from a API
<b-row v-for="(data,i) in get_list" :key="i" class="mt-3 mx-0">>
<b-button pill
class="quantity-btn btn-secondary"
#click="addQuantity(data.id_product,data.id_style)"
>
<span style="transform: translateY(-5%);">+</span>
</b-button>
<div class="px-2">
<b-form-input type="number" min="1" :max="data.quantity_available" :value="quantity" v-model="data.cart_quantity" class="quantity-input"></b-form-input>
</div>
<b-button pill
class="quantity-btn btn-secondary"
#click="minusQuantity(data.id_product,data.id_style)"
>
<span style="transform: translateY(-5%);">-</span>
</b-button>
</b-row>
script
data: () => ({
get_list: [],
quantity:0,
}),
method :{
addQuantity(id,style) {
this.quantity++
this.updateQuantity(id,style)
},
minusQuantity(id,style) {
this.quantity--
this.updateQuantity(id,style)
},
},
watch: {
quantity(newVal, oldVal) {
console.log('new'+newVal)
}
}

Answer 1

Take a look of this code in code proved above.
<div class="px-2">
<b-form-input type="number" min="1" :max="data.quantity_available" :value="quantity" v-model="data.cart_quantity" class="quantity-input"></b-form-input>
</div>
Here it seems cart_quantity is getting used in template instead of quantity due to this it's not getting updated.
to fix this issue, you can update the cart_quantity property of the data object instead of the quantity data property in the addQuantity and minusQuantity
methods: {
addQuantity(id, style) {
this.get_list.forEach(item => {
if (item.id_product === id && item.id_style === style) {
item.cart_quantity++;
}
});
},
minusQuantity(id, style) {
this.get_list.forEach(item => {
if (item.id_product === id && item.id_style === style) {
item.cart_quantity--;
}
});
}
}
Please remove watch property as well it seems not required.

Answer 2

The problem is that you are performing the add/minus operation on the quantity variable but in the template, you are using the cart_quantity variable which is not increasing/decreasing.
So, either use quantity or cart_quantity as per your logic.
addQuantity(id, style) {
this.cart_quantity++;
// If you are using quantity as v-model
// this.quantity++
this.updateQuantity(id, style);
},
minusQuantity(id, style) {
this.cart_quantity--;
// If you are using quantity as v-model
// this.quantity--
this.updateQuantity(id, style);
},
One more thing, you don't need to use value and v-model together at the same time. If you want to give some initial value to the input, simply assign that value to your cart_quantity on mounted and use it further.
The last thing, you don't need a watcher as well.