Reset alpine component to initial state - php

Question

I'm starting with Alpine js and I use a component with plus and minus buttons to add or remove items, however this is used in a modal that when invoked brings a specific product, the problem is that when closing the modal and opening it again with another product the component values ​​do not update, is there a way to reset to the initial state?
<div wire:model.defer='{{ $wiremodel }}'
class="input-group input-group-sm {{$size == 'l' ? 'input-group-lg': ''}} {{$size == 's' ? 'input-group-sm': ''}}"
x-data="{ count: {{ $min }}, max:{{ $max }}, min:{{ $min }}, price:{{ $price }},
increment(){
var incre;
if(this.max == 0){
incre = true;
this.count ++;
}else{
this.count == this.max ? incre = false : incre = true;
this.count == this.max ? this.count : this.count++;
}
if(incre){
var oldprice;
var newprice;
oldprice = $('#price_product_button').attr('data-price');
newprice = parseFloat(this.price) + parseFloat(oldprice);
$('#price_product_button').attr('data-price', newprice);
$('#price_product_button').html(newprice.toLocaleString('pt-BR', { style: 'currency' , currency:'BRL'}));
}
},
decrement(){
var decre;
this.count == this.min ? decre = false : decre = true;
this.count == this.min ? this.count : this.count--;
console.log(this.count);
if(decre){
var oldprice;
var newprice;
oldprice = $('#price_product_button').attr('data-price');
newprice = parseFloat(oldprice) - parseFloat(this.price) ;
$('#price_product_button').attr('data-price', newprice);
$('#price_product_button').html(newprice.toLocaleString('pt-BR', { style: 'currency' , currency:'BRL'}));
}
}
}">
<div class="input-group-prepend">
<button #click="decrement() ; $dispatch('input', count)" class="btn btn-outline-light bg-white text-danger" data-price="">
<i class="fas fa-minus"></i>
</button>
</div>
<input readonly x-model.number="count" class="form-control border-0 text-center input-btn-add-remove"
placeholder="{{ $min }}" />
<div class="input-group-append">
<button #click="increment() ; $dispatch('input', count)" class="btn btn-outline-light bg-white text-danger">
<i class="fas fa-plus"></i>
</button>
</div>
</div>```

Answer 1

If the x-data object of a component contains an init() method, it will be called automatically. For example:
<div x-data="{
init() {
this.count = {{ $min }};
this.max = {{ $max }};
this.min = {{ $min }};
this.price = {{ $price }};
}
}">
...
</div>
You can use that fact for your advantage and everytime the modal opens, the init method can be called to reset the values to its original state. Also it will be called automatically on the first init.