如何解决vue-js分页axios回调后jquery可排序的每个函数？

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th @click="sortData('id')">ID</th>
          <th @click="sortData('name')">Name</th>
          <th @click="sortData('age')">Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in sortedData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';
import $ from 'jquery';

export default {
  data() {
    return {
      data: [],
      sortKey: '',
      sortOrder: 'asc',
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    sortData(key) {
      if (this.sortKey === key) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortKey = key;
        this.sortOrder = 'asc';
      }

      this.data.sort((a, b) => {
        if (this.sortOrder === 'asc') {
          return a[key] - b[key];
        } else {
          return b[key] - a[key];
        }
      });
    },
  },
  computed: {
    sortedData() {
      return this.data;
    },
  },
};
</script>