Vue3.0 輸出json數據無法正常顯示

在Vue3.0中練習資料呈現以下圖片形式(此為黑馬程序員的課程範例):

但我的沒辦法輸出資料 , 如下:

 確認F12 裡面的數組可以顯示 , 應該可以證明資料沒問題吧?(如下):

請問是我的程式碼哪裡有問題嗎?

以下為原碼: Vue

<script setup>
import { affixProps } from 'element-plus';

let tableData = [];
let getData = function () {
  axios.get('./person.json')
    .then(function (result) {
      tableData = result.data.results;
      console.log(tableData);
    })
}
let onSubmit = function () {
  console.log("查詢")
}
let formInline
</script>

<template>
  <div class="common-layout">
    <el-container style="height: auto; border: 1px;">
      <el-header>智能教育系統</el-header>
      <el-container>
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu :default-openeds="['1', '3']">
              <el-menu-item-group>
                <template #title>Group 1</template>
                <el-menu-item index="1-1">
                  <router-link to="/deptView">deptList</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/empView">empList</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-menu>
          </el-scrollbar>
        </el-aside>

        <el-main>
          <!-- 表單 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="Approved by">
              <el-input v-model="formInline" placeholder="Approved by" clearable />
            </el-form-item>
            <el-form-item label="Activity zone">
              <el-select v-model="formInline" placeholder="Activity zone" clearable>
                <el-option label="female" value="shanghai" />
                <el-option label="male" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="Activity time">
              <el-date-picker v-model="formInline" type="date" placeholder="Pick a date" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">Query</el-button>
              <el-button type="primary" @click="getData">getData</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格 -->
          <el-scrollbar>
            <el-table :data="tableData">
              <el-table-column prop="id.name" label="ID" />
              <el-table-column prop="name.first" label="Name" />
              <el-table-column prop="gender" label="Gender" />
              <el-table-column prop="location.country" label="Address" />
            </el-table>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped></style>