当要排序的值是计算结果时，如何在Vue中对列进行排序

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th @click="sortColumn('column1')">Column 1</th>
          <th @click="sortColumn('column2')">Column 2</th>
          <th @click="sortColumn('column3')">Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in sortedData" :key="item.id">
          <td>{{ item.column1 }}</td>
          <td>{{ item.column2 }}</td>
          <td>{{ item.column3 }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, column1: 'Value 1', column2: 10, column3: 'A' },
        { id: 2, column1: 'Value 2', column2: 5, column3: 'B' },
        { id: 3, column1: 'Value 3', column2: 8, column3: 'C' },
      ],
      sortColumn: '',
      sortOrder: 1,
    };
  },
  computed: {
    sortedData() {
      return this.data.sort((a, b) => {
        if (a[this.sortColumn] < b[this.sortColumn]) {
          return -1 * this.sortOrder;
        }
        if (a[this.sortColumn] > b[this.sortColumn]) {
          return 1 * this.sortOrder;
        }
        return 0;
      });
    },
  },
  methods: {
    sortColumn(column) {
      if (this.sortColumn === column) {
        this.sortOrder *= -1;
      } else {
        this.sortColumn = column;
        this.sortOrder = 1;
      }
    },
  },
};
</script>