如何使用v-data-table上下移动行？

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    item-key="id"
    class="elevation-1"
  >
    <template v-slot:item="{ item }">
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <v-icon @click="moveUp(item)" class="mr-2">mdi-arrow-up</v-icon>
          <v-icon @click="moveDown(item)">mdi-arrow-down</v-icon>
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
        { text: 'Actions', value: 'actions' },
      ],
      items: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        { id: 3, name: 'Bob', age: 35 },
      ],
    };
  },
  methods: {
    moveUp(item) {
      const index = this.items.indexOf(item);
      if (index > 0) {
        this.items.splice(index, 1);
        this.items.splice(index - 1, 0, item);
      }
    },
    moveDown(item) {
      const index = this.items.indexOf(item);
      if (index < this.items.length - 1) {
        this.items.splice(index, 1);
        this.items.splice(index + 1, 0, item);
      }
    },
  },
};
</script>