'Vue 3 migrate broken scope by key

I migrate v-for from vue 2 to vue 3 and get different behavior.

Main component render array of two items to child component with scope KEY:

let items = computed(() => [  { subarray:[] }, { subarray:[] }  ]);

<div v-for="(item, i) in items" :key="i">
   <X :item="item"></X>
</div>

Component "X":

    <div v-for="i in item.subarray">
       {{ i }}
    </div>

const props = defineProps({
    item: Object,
});

function add(){
   props.item.subarray.push("abc");
}

But then i add new item to subarray in SECOND instance of component 'X', item ADDED TO FIRST instance of component X. What is problem ?

This code in vue 2 work fine, then i add item in second instance of component X i get right show in second instance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source