Vue 3中Object.assign与响应式数据？

前端小白，在学习Vue 3 响应式数据的时候，遇到了一个问题

<script lang="ts">
  export default{
    name:"test",
  }
</script>
<script lang="ts" setup>
  import {toRefs,ref,reactive} from "vue";

  let person = reactive({aa:"abc",bb:123})

  function c(){
    console.log(1)
    console.log(person)

    Object.assign(person,{aa:"121231",bb:12131})

    person =  {aa:"hhh",bb:13}   
    person =  {aa:"hh",bb:132} 
    
    console.log(person)
  }
  
</script>
<template>
  <span>姓名：{{person.aa}} </span> <br>

  <button @click="c">点击修改数据</button>

</template>

vue3官方文档中有如下说明

对于上面的代码和文档描述，按理说结果是姓名：121231，但是实际运行结果是姓名：hh

如果Object.assign(person,{aa:"121231",bb:12131})不存在，或者说不是先执行，确实是无法在页面上修改数据为hh，但是只要这一行代码存在并且先执行，就会修改为hh

根据上述现象，初步判断可能是Object.assign(person,{aa:"121231",bb:12131})代码副作用，查了MDN，说该API会调用get/set方法。

虽然vue是通过监听set/get方法实现的响应式渲染，上述mdn内容只是说明了Object.assign(person,{aa:"121231",bb:12131})为什么有效，但是还是不能解决我的疑惑

希望大佬说一下原因