Elements of array $refs keep the original order instead of the DOM order.

[infinnie]

Version

2.6.11

Reproduction link

https://codesandbox.io/s/focused-paper-3cqr1?file=/src/App.vue

Steps to reproduce

1. Write the Vue code as below.

<template>
  <div id="app">
    <template v-for="item in array">
      <p :key="item" ref="test">{{ item }}</p>
    </template>
    <button type="button" @click="log">Log</button>
    <button type="button" @click="reorder">Reorder</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { array: [1, 2, 3] };
  },
  methods: {
    log() {
      console.log(this.$refs.test.map((el) => el.getBoundingClientRect().top));
    },
    reorder() {
      this.array = [2, 1, 3];
    },
  },
};
</script>

2. Call the reorder() method.

3. Call the log() method after re-rendering.

What is expected?

An array is logged whose elements are in the order in which the corresponding elements appear in the document.

What is actually happening?

The logged array keeps the original order.

[infinnie]

Duplicate of #4952