如何动态改变v-data-table的表头？

data() {
  return {
    tableItems: [
      { name: 'John', age: 30, city: 'New York' },
      { name: 'Jane', age: 25, city: 'Los Angeles' },
      { name: 'Bob', age: 40, city: 'San Francisco' },
    ],
    tableHeaders: [
      { text: 'Name', value: 'name' },
      { text: 'Age', value: 'age' },
      { text: 'City', value: 'city' },
    ],
  };
},

<v-data-table :items="tableItems" :headers="tableHeaders"></v-data-table>

methods: {
  changeHeaders() {
    this.tableHeaders = [
      { text: 'First Name', value: 'name' },
      { text: 'Age', value: 'age' },
      { text: 'Location', value: 'city' },
    ];
  },
},

<button @click="changeHeaders">Change Headers</button>