vue web components - no re-rendering when modifying complex type parameters

[q479902964]

index.vue：

<template>
    <ms-test .testData="testData" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const testData = ref([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 11111, Grove St, Los Angeles',
    },
]);

const addRow = () => {
    testData.value.push({
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 11111, Grove St, Los Angeles',
    });
};

</script>

index.ce.vue:

<template>
    <div class="ms-test-wrapper">
        {{ props.testData }}
    </div>
</template>

<script setup lang="ts">
import { testProps } from './props';
const props = defineProps(testProps);
</script>

question:
After triggering the addRow function, no re-rendering when modifying testData.

I got the solution from here, but I have a question, that is, whether the same copy will affect the use of the updated vue version, because I inherited the class VueCustomElement and performed intermediate processing