如何使v-data-table的表头动态

data() {
  return {
    headers: [
      { text: '姓名', value: 'name', sortable: true },
      { text: '年龄', value: 'age', sortable: true },
      { text: '性别', value: 'gender', sortable: false },
    ],
    // 其他数据...
  }
}

<v-data-table
  :headers="headers"
  :items="items"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
>
  <!-- 表格内容 -->
</v-data-table>

<v-data-table
  :headers="headers"
  :items="items"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
>
  <template v-slot:headers="{ headers }">
    <tr>
      <th
        v-for="header in headers"
        :key="header.text"
        :class="{'sortable': header.sortable}"
        @click="sortByColumn(header.value)"
      >
        {{ header.text }}
      </th>
    </tr>
  </template>
  <!-- 表格内容 -->
</v-data-table>

methods: {
  sortByColumn(column) {
    if (this.sortBy === column) {
      this.sortDesc = !this.sortDesc;
    } else {
      this.sortBy = column;
      this.sortDesc = false;
    }
  },
  // 其他方法...
}