如何在VueJS中将表格行追加到元素单击的末尾？

data() {
  return {
    tableData: [
      { id: 1, name: 'John', age: 25 },
      { id: 2, name: 'Jane', age: 30 },
      // ...
    ]
  }
}

<table>
  <tr v-for="row in tableData" :key="row.id">
    <td>{{ row.id }}</td>
    <td>{{ row.name }}</td>
    <td>{{ row.age }}</td>
  </tr>
</table>

<table>
  <tr v-for="row in tableData" :key="row.id" @click="appendRow(row)">
    <td>{{ row.id }}</td>
    <td>{{ row.name }}</td>
    <td>{{ row.age }}</td>
  </tr>
</table>

methods: {
  appendRow(row) {
    this.tableData.push(row);
  }
}