I am encountering an issue where I want to display data dynamically from a database using a v-for loop. However, when I attempt to push new data into the array, they show correctly in a console.log() but do not reflect any changes in the template.
I have created a simplified version of this on Codepen:
<template>
<ul v-for="number in numbers">
<li>{{ number.num }} : {{ number.text }}</li>
</ul>
{{ numbers }}
</template>
<script setup>
let numbers = [
{ num: 1, text: "One" },
{ num: 2, text: "Two" },
{ num: 3, text: "Three" }
];
// Simulate server delay
setTimeout(() => {
numbers.push({ num: 4, text: "Four" });
console.log(numbers); // Returns the updated array correctly
}, 3000);
</script>
Link to the Codepen Demo: https://codepen.io/Tenarius/pen/QWBLOJZ
Can anyone provide assistance with this issue?