如何在V-Data-Table中正确添加求和行并保留排序？

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :footer-props="footerProps"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc"
    :multi-sort="multiSort"
    :loading="loading"
    :no-data-text="noDataText"
    :rows-per-page-items="rowsPerPageItems"
    :rows-per-page-text="rowsPerPageText"
    :page-text="pageText"
    :items-per-page-all-text="itemsPerPageAllText"
    :items-per-page-text="itemsPerPageText"
    :pagination.sync="pagination"
  >
    <template v-slot:item.sum="{ item }">
      {{ calculateSum(item) }}
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
        { text: 'Sum', value: 'sum', sortable: false },
      ],
      items: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
        { name: 'Bob', age: 35 },
      ],
      sortBy: 'name',
      sortDesc: false,
      multiSort: false,
      loading: false,
      noDataText: 'No data available',
      rowsPerPageItems: [10, 20, 30],
      rowsPerPageText: 'Rows per page:',
      pageText: '{0}-{1} of {2}',
      itemsPerPageAllText: 'All',
      itemsPerPageText: 'Items per page:',
      pagination: {
        sortBy: 'name',
        descending: false,
        page: 1,
        rowsPerPage: 10,
      },
    };
  },
  computed: {
    footerProps() {
      return {
        items: this.items,
        sum: this.calculateTotalSum(),
      };
    },
  },
  methods: {
    calculateSum(item) {
      return item.age; // 求和行的计算逻辑，这里以年龄为例
    },
    calculateTotalSum() {
      let totalSum = 0;
      for (let i = 0; i < this.items.length; i++) {
        totalSum += this.items[i].age;
      }
      return totalSum;
    },
  },
};
</script>