when Vue.js is updating the list of rendered elements with v-for, it defaults to the "reuse in place" policy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but simply reuse each element here and ensure that it displays each element that has been rendered under a specific index. This is similar to the track-by= "$index" of Vue 1.x.

this default mode is efficient, but only for list rendered output that does not depend on the subcomponent state or temporary DOM state (for example, form input values).

in order to give Vue a hint so that it can track the identity of each node, thereby reusing and reordering existing elements, you need to provide a unique key attribute for each item. The ideal key value is a unique id that exists for each item. This special property is equivalent to the track-by of Vue 1.x, but it works like a property, so you need to bind dynamic values with v-bind (abbreviated here):

< div VFF = "item in items": key= "item.id" >