Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

I'm looping through an array of objects and using slots inside a row child component to determine the functionality of a cell in a table (for example). Now I'm adding a new element to that array. Without passing the slot it works like expected.

What is expected?

Only state of the added row changes (reflected in timestamp)

What is actually happening?

State of entire table changes (all timestamps update)

Same issue occurs in a Vue 2 app going the same approach. So maybe I'm doing something wrong in general? Any help would be highly appreciated, thanks!

maybe v-memo

   <Row v-for="row in tableData" :key="row.id" class="flex" :row="row" v-memo="[row.id]" >

@bart as @lidlanca said. use v-memo for this scenario.