tengo la siguiente plantilla en vue 2 (versión simplificada):

 <template> <div> <div v-for="(data, index) in allData" :key="index"> <app-collection :data="data" :index="index"></app-collection> </div> </div> </template>

Mis datos son los siguientes:

 data: function(){ return { allData: [] } }

Luego tengo un botón de cargar más cuando hago clic en Llamo a un método que obtiene datos de una API y luego los agrega a allData en un bucle forEach como este:

 this.allNFT.push({name: "name 1", age: 25"})

Mi problema es que cada vez que agrego datos nuevos, se vuelve a representar la lista completa en lugar de solo agregarla al final.

¿Hay alguna manera de evitar eso y simplemente agregar nuevos datos?

Aquí hay una descripción general más global de mi código en una versión simplificada (todavía no tengo la API en línea):

 <template> <div> <div id="collectionList" class="form-group" v-else> <div class="row"> <div class="col-lg-4" v-for="(data, index) in allData" :key="data.assetId+'_'+index"> <app-collection :data="data" :index="index"></app-collection> </div> </div> <button class="btn btn-primary" v-if="loadMore" @click="getallData()">Load more</button> <div v-else class="text-center">{{ allData.length ? 'All data loaded' : 'No data found' }}</div> </div> </div> </template> <script> import collection from '@/components/content/collection/collection.vue' export default { data: function(){ return { loadMore: true, allData: [], perpage: 25, currentPage: 1 } }, components: { 'app-collection': collection }, created: function(){ this.init() }, methods: { init: async function(){ await this.getallData() }, getallData: async function(){ let filtered = { "page": this.currentPage, "perpage": this.perpage, } try{ let getData = await fetch( "http://localhost:3200/secondary/paginate-filter", { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify( filtered ) } ) getData = await getData.json() if(getData.length){ getData.forEach((elm) => { this.allData.push({name: elm.name, age: elm.age}) }) } this.currentPage++ if(getData.length < this.perpage){ this.loadMore = false } }catch(e){ console.log(e) } }, } }; </script>