How to reflect instant change in v-for? - vue.js

Question

Let's assume that the product information of our users can be changed by users. When the name is changed to any of the products of the customer, it is not reflected instantly. It is reflected when the page is refreshed. What is the solution?
<template>
<div>
<table>
<thead>
<tr>
<th scope="col">
<span>Name</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(customer,n) in customers" :key="n">
<td>
<div>
<p>{{ !customer?.product?.productName ? "" : customer?.products?.productName }}
</div>
</td>
</tr>
</tbody>
</div>
</template>
<script>
export default {
data() {
return {
customers: [
{
name: 'Jack', surname: 'Bruyne',
products: [
{i: 1, productName: 'home'},
{i: 2, productName: 'car'},
{i: 3, productName: 'yatch'},
{i: 4, productName: 'villa'},
]
}
],
}
},
}
</script>

Answer 1

The objects returned by data() function is reactive; the UI will update when the underlying data object changes. In your code, you do not show the products in the UI. Since you have an array of customers and each customer has an array of products, you need two v-fors.
The following code shows the products of each user, and the button changes a random product name from a given list. As you can see, the UI is updated automatically:
<div>
<table>
<thead>
<tr>
<th scope="col">
<span>Name</span>
</th>
<th>Products</th>
</tr>
</thead>
<tbody>
<tr v-for="(customer,n) in customers" :key="n">
<td>
<p>{{customer.name}}</p>
</td>
<td>
<span v-for="product in customer.products" :key="product.i">
{{product.productName}},
</span>
</td>
</tr>
</tbody>
</div>
<button #click="changeProduct">Swap random product</button>
</div>
<script>
methods: {
changeProduct() {
const personId = Math.floor(Math.random() * 2);
const productId = Math.floor(Math.random() * 4);
const randomId = Math.floor(Math.random() * 8);
this.customers[personId].products[productId].productName = this.randomProducts[randomId];
}
},
data() {
return {
randomProducts: ["car", "home", "yacht", "villa", "PC", "batmobile", "keyboard", "stuff"],
customers: [
{
name: 'Jack', surname: 'Bruyne',
products: [
{i: 1, productName: 'home'},
{i: 2, productName: 'car'},
{i: 3, productName: 'yatch'},
{i: 4, productName: 'villa'},
]
},
{
name: 'John', surname: 'Doe',
products: [
{i: 1, productName: 'PC'},
{i: 2, productName: 'batmobile'},
{i: 3, productName: 'Keyboard'},
{i: 4, productName: 'stuff'},
]
}
],
}
}
})
</script>