当一个表被vue v-for填充时，我能让它变得可排序吗？

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key" @click="sortTable(column.key)">
          {{ column.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in sortedData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <!-- 其他表格列 -->
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        // 其他数据项
      ],
      columns: [
        { key: 'name', label: '姓名' },
        { key: 'age', label: '年龄' },
        // 其他表头列
      ],
      sortKey: '', // 当前排序的属性
      sortDirection: 'asc', // 排序方向，可选值为'asc'或'desc'
    };
  },
  computed: {
    sortedData() {
      // 根据sortKey和sortDirection对数据进行排序
      const sorted = this.data.slice().sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1;
        if (a[this.sortKey] > b[this.sortKey]) return 1;
        return 0;
      });

      // 如果排序方向为'desc'，则反转数组
      if (this.sortDirection === 'desc') {
        sorted.reverse();
      }

      return sorted;
    },
  },
  methods: {
    sortTable(key) {
      // 如果点击的表头与当前排序的属性相同，则切换排序方向
      if (key === this.sortKey) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
      } else {
        // 否则，设置新的排序属性和默认的升序排序方向
        this.sortKey = key;
        this.sortDirection = 'asc';
      }
    },
  },
};
</script>