Vue: issue with reactive object not updating?

Hi everybody, I have an item card component I set with an v-for, inside each component you can increase or decrease the number of items the user want to add to the cart, when I click I get an alert and the count increases/decreases as it should but the value discount.quantity doesn’t update in mu view, it’s always 1 (default value).

I know about reactivity caveats and I’m using Vue.set to make the property reactive but it’s not updating… check my component:

<template>
<div class="DISCOUNTlist6_item_container shadow">
    <div class="DISCOUNTlist6_item_texts_container">
        <div class="DISCOUNTlist6_item_texts_quantity_container" style="width:100%; height:auto; display:flex;  justify-content:space-between; flex-wrap:no-wrap; margin:20px 0px 0px 0px;">
            <div class="DISCOUNTlist6_item_texts_quantity_row_container" style="width:35%; height:40px; display:flex;">
                <button class="DISCOUNTlist6_item_texts_quantity_button" @click="decreaseQuantityByOne()" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center; background-color:rgb(10,10,10);" type="button"><i class="fa fa-minus fs_smaller c_light"></i></button>
                <div class="DISCOUNTlist6_item_texts_quantity_number fs_big c_normal" style="flex:1; height:100%; display:flex; align-items:center; background-color:white; justify-content:center;">{{ discount.quantity }}</div>
                <button class="DISCOUNTlist6_item_texts_quantity_button" @click="increaseQuantityByOne()" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center; background-color:rgb(10,10,10);" type="button"><i class="fa fa-plus fs_smaller c_light"></i></button>
            </div>
            <button class="DISCOUNTlist6_item_texts_quantity_cart_button secondary fs_big" @click="getDiscountData()" :disabled="!globals.auth" style="width:62%; height:40px; background-color:var(--web_primary_color);">Añadir al carrito</button>
        </div>
    </div>
</div>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
name: 'DISCOUNTcard5',


props:
{
    discount: {required:true},
},


methods:
{
  

    ...mapActions('Cart', ['addProductToCart']),

    decreaseQuantityByOne: function()
    {
        if(this.discount.quantity > 1){
            this.discount.quantity = this.discount.quantity - 1;
        }
    },


    increaseQuantityByOne: function()
    {
        if(this.discount.quantity < this.discount.stock_left){
            //this.discount.quantity = this.discount.quantity + 1;
            //Vue.set(this.discount, 'quantity', this.discount.quantity + 1)
            this.$set(this.discount, 'quantity',  this.discount.quantity + 1)
            alert(this.discount.quantity);
        }
    },
}


};
</script>

You should not update the discount value here because it’s a property. Can refer to this stackoverflow answer:

You should update the discount value from the original source of the discount variable. It’s a basic principle that child component should not update parent component directly.

But what’s the original source here? discounts variable comes from my backend (laravel), I pass it as a prop into my discount card component which I added a v-for…

If it’s from backend, does it mean you have to run AJAX to update the quantity? If so, by right it should be done under your store action then.

Perhaps you can share me more details on how you retrieve the discount variable so I can understand your code better.