vue3的reactive对象赋值后失去响应式的问题

vue3种对象类型的响应式用reactive实现。

但是reactive对象在赋值后，因为变量代理函数变了，就失去了响应式功能了。示例如下：

<template>
  <div>
    <div >{{ data.name}}</div>
    <div >{{ data.age}}</div>
    <button @click="onUp">长大</button>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

let data = reactive({name:'小猫', age:7})

const onUp = () => {
  data = reactive({name:'小猫', age:10})
}
</script>

解决方法1：通过对象属性来修改：data.age=10

解决方法2：改用ref来定义变量