andv table row-selection的bug记录

antdv版本:^3.2.9
下面全部代码

<template>
  <div>
    <div style="margin-bottom: 16px">
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start"> Reload </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
      </span>
    </div>
    <!-- <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" /> -->
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
    />
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, reactive, toRefs } from 'vue'

  type Key = string | number

  interface DataType {
    key: Key
    name: string
    age: number
    address: string
  }

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ]

  const data: DataType[] = []
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`,
    })
  }

  export default defineComponent({
    setup() {
      const state = reactive<{
        selectedRowKeys: Key[]
        loading: boolean
      }>({
        selectedRowKeys: [], // Check here to configure the default column
        loading: false,
      })
      const hasSelected = computed(() => state.selectedRowKeys.length > 0)

      const start = () => {
        state.loading = true
        // ajax request after empty completing
        setTimeout(() => {
          state.loading = false
          state.selectedRowKeys = []
        }, 1000)
      }
      const onSelectChange = (selectedRowKeys: Key[]) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys)
        state.selectedRowKeys = selectedRowKeys
      }
      const rowSelection = {
        selectedRowKeys: state.selectedRowKeys,
        onChange: (selectedRowKeys: Key[]) => {
          console.log('selectedRowKeys changed: ', selectedRowKeys)
          state.selectedRowKeys = selectedRowKeys
        },
      }
      return {
        data,
        rowSelection,
        columns,
        hasSelected,
        ...toRefs(state),

        // func
        start,
        onSelectChange,
      }
    },
  })
</script>

当rowSelection在js中写了一个对象

 <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" />

这种写法就会出现问题

选择了10给标签但是数据没有展示出来

 <a-table
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    :columns="columns"
    :data-source="data"
  />

上面这种写法就没什么问题