Version

3.2.25

Reproduction link

github.com

Steps to reproduce

npm ci. npm run dev. open.chrome console. click change image list.

What is expected?

/src/images/1.jpg /src/images/2.jpg /src/images/3.jpg /src/images/4.png /src/images/5.jpg /src/images/6.png /src/images/7.jpg /src/images/8.jpg

What is actually happening?

/src/images/1.jpg /src/images/2.jpg /src/images/8.jpg /src/images/7.jpg /src/images/6.png /src/images/5.jpg /src/images/4.png /src/images/3.jpg

This is expected behavior. The order in which child components are created during v-for loops is not guaranteed and depends on the kind of change that is being processed.

This seems to be the default behavior for Vue2, is there an alternative in Vue3？