Dynamic_Autofocus.vue

<template>
  <div>
    <input type="number" v-model="count" placeholder="Number" ref="counter" />
    <button @click="addRow">Add</button>
    <table>
      <div v-for="index in rowsCount" :key="index">
        <tr>
          <td>
            <input placeholder="Name" :ref="'name' + index" />
          </td>
          <td>
            <input placeholder="Email" />
          </td>
        </tr>
      </div>
    </table>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      count: 0,
      rowsCount: 0,
    };
  },
  methods: {
    addRow() {
      const currentCount = this.rowsCount;
      this.rowsCount = this.count + Number(currentCount);
      this.count = 0;
      setTimeout(() => {
        const key = "name" + (currentCount + 1);
        this.focusElement(key);
      });
    },
    focusElement(key) {
      const refs = this.$refs;
      const element = refs[key];
      console.log(key);
      console.log(refs);
      console.log(element);
      if (element == null) return;
      element.focus();
    },
  },
};
</script>