vue3 父組件傳值給子組件，父組件中值更新后子組件不更新

父組件

<template>
    <child :tableData="tableData"></child>
</template>
<script lang="ts" setup>
    import { reactive, toRefs } from 'vue'
    import axios from 'axios'
    const state = reactive({
        tableData: [],
        listParam: {
           page: {
              pageNum: 1,
              pageSize: 10
           },
           storeName: ''
        }
    })
    const {listData, listParam} = toRefs(state)
    const getData = () => {
        axios.post('/user', listParam).then((res) => {
            state.tableData = res.data.result;
        }).catch((err) => {
            console.log(err)
        });
    }
</script>        

　　

子組件(錯誤代碼)

<template>
  <ul>
    <li v-for="item in tableData" :key="item.id"></li>
  </ul>
</template>
<script lang="ts" setup>
  interface Props {
    tableData: Array<any>
  }
  const props = defineProps<Props>();
  const { tableData } = props;
</script>

　　

子組件(正確代碼)

<template>
  <ul>
    <li v-for="item in tableData" :key="item.id"></li>
  </ul>
</template>
<script lang="ts" setup>
  import { reactive, toRefs } from 'vue';
  interface Props {
    tableData: Array<any>
  }
  const props = defineProps<Props>();
  const { tableData } = toRefs(props);
</script>