当我在阅读这个链接中提到的Additional Ref Unwrapping Details时，我想实现下面发布的示例，以区分普通ref和ref之间的差异，当传递给reactive对象的属性时。
对于下面提到的代码，我想知道以下内容：
1-为什么count设置为0时console.log("count:",count)显示对象
2-为什么当count分别为1和2时，console.log("count:",count)显示的值等于1和2。
3-为什么console.log("state:",state)显示的值等于count的值为1、2和3时的相同对象

编码：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref,reactive } from 'vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<script setup>
let count = ref(0)
const state = reactive({count})

console.log("------------count = 0----------------");
console.log("count:",count)
console.log("count.value:",count.value);
console.log("state:",state)
console.log("------------count = 1----------------");
count = 1
console.log("count:",count);
console.log("count.value:",count.value);
console.log("state:",state);
console.log("------------count = 2----------------");
count = 2
console.log("count:",count);
console.log("count.value:",count.value);
console.log("state:",state);
</script>

结果：