Vue3中的ref为何要用.value进行值的调用呢

<template>
  <div class="div">
    <todos :Obj="tos" :removeObj="removeObj"></todos>
  </div>
</template>
<script>
import search from '@/components/search'
import todos from '@/components/todos'
import all from '@/components/all'
export default {
  name: 'App',
  data () {
    return {
      tos: [
        { id: '001', value: '第一个', done: true },
        { id: '002', value: '第二个', done: true },
        { id: '003', value: '第三个', done: false },
        { id: '004', value: '第四个', done: true },
      ],
    }
  },
  computed: { },
  components: {
    search, todos, all,
  },
  methods: {
    removeObj (obj) {
      console.log(obj.id)
      this.tos = this.tos.filter(item => item.id !== obj.id)
      console.log(this.tos)
    },
  },
}
</script>
<style scoped>
// 样式
</style>

<script lang="ts" setup>
let str = ref('响应式字符串')
let obj = reactive({
  name: '张三',
  age: 10,
})
</script>

let count = ref(1)
const add = () => {
  count.value += 1
}

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 开启ref转换
    })
  ]
})

<template>
    <div>{{count}}</div>
    <button @click="add">click me</button>
</template>
<script setup>
let count = $ref(1)
const add = () => {
    count++
}
</script>