Why Nuxt 3 Not Updating Realtime Upon Data Change on Props? - vue.js

Question

i have this problem in which the HTML page is not updating upon props variables change. Please help me.
I make a table in my child element based on the array passed by the parent, here is the child code:
<table>
<thead>
<th>Rank</th>
<th>Nama</th>
<th>Blank</th>
<th>Error</th>
<th>Warning</th>
<th>Clean</th>
<th>Total</th>
</thead>
<tbody>
<tr v-for="(datae, index) in props.ranking" :key="index">
<td>{{ index }}</td>
<td>{{ '(' + datae.username + ') ' + datae.realname }}</td>
<td>{{ datae.blank }}</td>
<td>{{ datae.error }}</td>
<td>{{ datae.warning }}</td>
<td>{{ datae.clean }}</td>
<td>{{ datae.total }}</td>
</tr>
</tbody>
</table>
Here is the child script:
<script setup lang="ts">
var props = defineProps({
ranking: {
type: Array,
required: false,
}
})
watch(() => props.ranking, (newValue, oldValue) => console.log('tes'))
</script>
I am expecting the html table update upon props.ranking change

Answer 1

I noticed a couple of issues here. It might help you.
First of all, you used the props keyword in the template, it's not needed.
<!-- props.ranking -> ranking -->
<tr v-for="(datae, index) in ranking" :key="index">
<td>{{ index }}</td>
<td>{{ '(' + datae.username + ') ' + datae.realname }}</td>
<td>{{ datae.blank }}</td>
<td>{{ datae.error }}</td>
<td>{{ datae.warning }}</td>
<td>{{ datae.clean }}</td>
<td>{{ datae.total }}</td>
</tr>
The second point is that you watch an array prop, but it isn't changed, only the properties (items) of this array will be changed. So your watcher callback never fires. To fix this, you can pass the deep option to watch as a third argument, like this:
watch(() => props.ranking,
(newValue, oldValue) => console.log('tes'),
{ deep: true }
)
Source: watch arrays