如何在Quasar / Vue中将自定义表头正确绑定到数据

<template>
  <q-table
    :rows="tableData"
    :columns="tableColumns"
  ></q-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      tableColumns: [], // 表头数据
    };
  },
};
</script>

data() {
  return {
    tableColumns: [
      {
        name: 'Name',
        required: true,
        label: '姓名',
        align: 'left',
        field: 'name',
        sortable: true,
      },
      {
        name: 'Age',
        align: 'center',
        label: '年龄',
        field: 'age',
        sortable: true,
      },
      // 其他自定义表头
    ],
  };
},

data() {
  return {
    tableData: [
      { name: '张三', age: 20 },
      { name: '李四', age: 25 },
      // 其他数据
    ],
  };
},

<q-table
  :rows="tableData"
  :columns="tableColumns"
></q-table>