v-virtual-scroll does not update when items changes

[cadilhac]

I would like to know if it's normal than v-virtual-scroll does not update when its items property changes (in my case, items are reordered). Items is linked to a component prop. If yes, how do I do to update the scroller when the items prop changes?

<v-virtual-scroll :items="games">
    <template v-slot:default="{ item }">
        <PersonalGameCard :game="item">
        </PersonalGameCard>
    </template>
</v-virtual-scroll>

const props = defineProps(['games'])

Also is there a notion of key? No sign of this in the doc. Intuitively, I would have added :key="item.id" to my PersonalGameCard element...

Finally, note that if I replace the virtual scroller by a basic v-for, then it works perfectly.

Thanks

[yuwu9145]

Reproduce link plz

[cadilhac]

Unfortunately I don't succeed writing a repro. In my attempt, it works well, which frustrates me.
I also realized that in my own app, the scroller updates the new items on screen only if I resize it, otherwise it does not.

[cadilhac]

ok, I got it and it has to do with Vue, not Vuetify. I changed the repro to make it fail

It has to do with the initial data that is not reactive and my computed value that uses inplace sort. In that case, I should make it reactive or make a copy of the array before calling sort.