Bootstrap modal show wrong information - wordpress

Question

I have a strange issue with a bootstrap carousel I've implemented in a vue wordpress theme.
I want to show some featured products and I've used a v-for loop to iterate some different arrays, and this seems working. The problem is when I want to load the product details of an item of the carousel, The modal I've implemented that will be opened when an item is clicked, will show the wrong information, but the information in the carousel are correct.
Here is the code I'm using to show the carousel
<div id="caroselloCatalogo" class="carousel slide mt-4 mb-4" data-bs-ride="carousel">
<div class="carousel-inner">
<!-- -->
<div class="carousel-item active">
<div class="row m-0">
<!-- TOFIX VISUALIZZARE PRODOTTO CORRETTO -->
<div class="col-md-4 col-lg-4" v-for="(product, i) in store.featuredPescheria" :key="i">
<a href="#" class="text-decoration-none stretched-link" #click.prevent="showFeaturedProduct(product)" data-bs-target="#featuredModal" data-bs-toggle="modal">
<div class="card">
<div class="row m-0">
<div class="col-md-5 col-lg-5 p-0">
<img src="http://localhost/iperfutura-prenotazioni/wp-content/uploads/2022/10/600.png" class="card-img-top">
</div>
<div class="col-md-7 col-lg-7">
<div class="card-body">
<h5 class="card-title text-uppercase m-0" id="featuredCardTitle">
{{ product.prodName }}
</h5>
<p class="card-text text-uppercase m-0">
{{ product.prodPrice }} {{ product.prodUnit }}
</p>
<small class="text-uppercase">Cod. {{ product.prodCode }}</small>
<a href="#" class="text-uppercase text-decoration-none" id="featuredProductLink" #click.prevent="showFeaturedProduct(product)">
Visualizza prodotto
</a>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- -->
<div class="carousel-item">
<div class="row m-0">
<div class="col-md-4 col-lg-4" v-for="(product, i) in store.featuredGastronomia" :key="i">
<a href="#" class="text-decoration-none stretched-link" #click.prevent="showFeaturedProduct(product)" data-bs-target="#featuredModal" data-bs-toggle="modal">
<div class="card">
<div class="row m-0">
<div class="col-md-5 col-lg-5 p-0">
<img src="http://localhost/iperfutura-prenotazioni/wp-content/uploads/2022/10/600.png" class="card-img-top" alt="" id="">
</div>
<div class="col-md-7 col-lg-7">
<div class="card-body">
<h5 class="card-title text-uppercase m-0" id="featuredCardTitle">
{{ product.prodName }}
</h5>
<p class="card-text text-uppercase m-0">
{{ product.prodPrice }} {{ product.prodUnit }}
</p>
<a href="#" class="text-uppercase text-decoration-none" id="featuredProductLink" #click.prevent="showFeaturedProduct(product)">
Visualizza prodotto
</a>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- -->
<div class="carousel-item">
<div class="row m-0">
<div class="col-md-4 col-lg-4" v-for="(product, i) in store.featuredPasticceria" :key="i">
<a href="#" class="text-decoration-none stretched-link" #click.prevent="showFeaturedProduct(product)" data-bs-target="#featuredModal" data-bs-toggle="modal">
<div class="card">
<div class="row m-0">
<div class="col-md-5 col-lg-5 p-0">
<img src="http://localhost/iperfutura-prenotazioni/wp-content/uploads/2022/10/600.png" class="card-img-top" alt="" id="">
</div>
<div class="col-md-7 col-lg-7">
<div class="card-body">
<h5 class="card-title text-uppercase m-0" id="featuredCardTitle">
{{ product.prodName }}
</h5>
<p class="card-text text-uppercase m-0">
{{ product.prodPrice }} {{ product.prodUnit }}
</p>
<a href="#" class="text-uppercase text-decoration-none" id="featuredProductLink" #click.prevent="showFeaturedProduct(product)">
Visualizza prodotto
</a>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#caroselloCatalogo" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#caroselloCatalogo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I'm getting the information from the WP rest api, and after that all the available products are fetched, I'm using slice to limit the numbers of products that each array will hold
this.store.featuredGastronomia = this.store.gastronomia.slice(0, 3)
When a product is clicked, I'm calling this method to assign to a variable all the needed information
showFeaturedProduct(product){
console.log(product)
this.showOffacnvas = true
this.featuredProduct = product
},
dismissFeaturedProduct(){
this.featuredProduct = {}
this.showOffacnvas = false
}
What's wrong with the carousel code and why the modal data are wrong?