Soy nuevo en Vue y trato de mostrar una lista de "notas" que se actualizan cuando se presiona un botón (acabo de codificar el valor para agregar por ahora). El problema es que después de agregar un nuevo elemento a la matriz, esto no se actualiza en la interfaz de usuario. Estoy usando Vue3 y la: clave que estoy usando es única. Otros "widgets" que hice funcionaron como se esperaba, pero obtuvieron datos de una respuesta de API. ¿Está relacionado tal vez con el aspecto asíncrono/en espera de tratar con las respuestas de la API en comparación con simplemente agregar/empujar a la matriz de datos?

 <template> <Widget class="notes" :style="style" @load="showNotes()"> <h3>Notes</h3> <p v-for="item in data" :key="item.id">{{ item.note }}</p> <button @click="addNote()">Add</button> </Widget> </template> <script> import Widget from "./Widget.vue"; export default { name: "Notes", props: { widgetWidth: Number, }, computed: { style() { return "max-width: " + this.widgetWidth + "px"; }, }, data() { return { notes: undefined, }; }, methods: { addNote() { var x; if (!this.data) { this.data = []; x = 0; } else { x = this.data.length; console.log(x); } this.data.push({ id: x, note: "another" }); console.log(this.data); }, showNotes() { this.data = [{ id: 0, note: "init" }]; }, }, beforeMount() { this.showNotes(); }, components: { Widget }, }; </script> <style scoped> .notes { min-width: 100px; word-wrap: break-word; display: flex; flex-direction: column; justify-content: space-between; } .notes > * { flex-grow: 1; } </style>