vue3 响应式数据重新赋值后，reactive 丢失响应式，而 ref 不会（其中发现一个大坑）

完整调试 代码

<template>
  <div>{{ refObj.b }}</div>
  <div>{{ reactiveObj.a }}</div>
  <div>
    <button @click="changeRef">修改Ref</button>
    <button @click="changeReactive">修改Reactive</button>
    <button @click="resetRef">重置Ref</button>
    <button @click="resetReactive">重置Reactive</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

let refObj = ref({
  b: 'ref-111111111'
})
let reactiveObj = reactive({
  a: 'reactive-111111111',
  c: 'ccccccccc'
})
function changeRef() {
  refObj.value = { b: 'ref-2222222' }
  console.log('changeRef', refObj, reactiveObj)
}
function changeReactive() {
  reactiveObj = { a: 'reactive-22222222' }
  console.log('changeReactive', refObj, reactiveObj)
}
function resetRef() {
  refObj.value = {
    b: 'ref-111111111'
  }
  console.log('resetRef', refObj, reactiveObj)
}
function resetReactive() {
  reactiveObj = { a: 'reactive-111111111' }
  console.log('resetReactive', refObj, reactiveObj)
}
console.log('base', refObj, reactiveObj)
</script>
<style scoped>
button {
  border: 1px solid #333;
  padding: 5px 10px;
  margin-right: 20px;
}
</style>

第一个问题：reactive响应式丢失，ref响应式没有丢失

1、点击 第二个按钮 修改Reactive的值 页面没有任何变化，控制台中可以看到使用reactive做响应式的数据 reactiveObj 丢失响应式

2、刷新页面后 点击 第一个按钮 修改Ref的值 页面数据发生变化，控制台中可以看到使用ref做响应式的数据 refObj 还是一个RefImpl(ref对象)，响应式还在。

注意：这里就有一个大坑，先点击 修改Ref 按钮 ref响应数据会对应改变，再点击修改Reactive 按钮 由于reactive响应数据失效， 页面不会变化。刷新页面后反过来，先点击修改Reactive 按钮，由于reactive响应数据失效， 页面不会变化，再点击修改Ref 按钮，ref响应数据和reactive响应数据 都会发生变化。这问题本人猜测是因为响应式数据更新后，vue将整个setup中的数据整个刷新了一下，而不是仅仅将对应的响应数据做了修改