vue动态添加了：在此中没有显示v-for中的参考。$ refs

Question

我是vue.js的新手，我有一个vue.js组件，当单击“添加元素”时，基本上显示了数据数组中的数字，代码如下：

<template>
  <div>
    <button @click="updateCounter">Add elements</button>
    <div
      v-for="number in numsArray"
      :key="number"
      :ref="`${number}`"
    >
      <div>
        <p>{{ number }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { SocketUpdate as socketUp } from "./components/Data";

export default {
  name: "App",
  data() {
    return {
      numsArray: [],
      counter: 0,
    };
  },
  mounted() {
    console.log("REFS when mounted::", this.$refs);
  },
  beforeUpdate() {
    console.log("REFS before updated::", this.$refs);

  },
  updated() {
    console.log("REFS updated::", this.$refs);
  },
  methods: {
    updateCounter() {
      this.counter++;
      const copyOfArray = [...this.numsArray];
      copyOfArray.push(this.counter);
      this.numsArray = copyOfArray;
      console.log(this.numsArray);
    }
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

但是，1。单击按钮时并将新元素添加到numsArray中，并显示在V-For Div中，：ref =“ $ {number} ” “ 从不与各个元素关联，因为尝试打印this。$ refs在已安装，更新或挂钩之前的数组；该数组为空的（无参考），这意味着这些元素是在DOM中创建的，这些数字是可见的，但是与它们相关的参考文献永远不会创建或添加到this中。$ refs array。和2。console.log（“ refs ...”，this。$ refs）;仅在单击按钮时显示在pertupdate中，然后在安装架上时显示组件通过pertupdate，而不是在更新的情况下传递，如果数据元素（在这种情况下为NUMSARRAY）已更新，您是否知道如何调用更新的挂钩？

感谢您！