VueJS -如何重新加载数据表？

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.column1 }}</td>
          <td>{{ item.column2 }}</td>
          <td>{{ item.column3 }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="reloadTableData">Reload</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [] // 数据源
    }
  },
  methods: {
    reloadTableData() {
      // 清空数据源
      this.tableData = [];

      // 重新获取数据
      // 可以通过调用后端接口获取最新的数据
      // 示例：假设通过axios发送GET请求获取数据
      axios.get('/api/data')
        .then(response => {
          this.tableData = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>