Vue3无法用watch监听到通过ref定义的div内容的改变

源码如下：

div设置了contenteditable属性，但是其中的通过ref绑定的数据监听不到变化

<script setup>
import {onMounted, ref,watch} from "vue"

let textbox = ref('')
onMounted(()=>{
        let content = ref(textbox.value.innerText)
        console.log(content)  //打印还是一个数据代理而不是值
        console.log(textbox.value.innerText) //打印的却是一个值 
        // 监视不到数据的改变  
        watch(content,(newValue,oldValue)=>{
                console.log(newValue,oldValue)
        })
})
</script>

<template>
        <div class="bbox">
                <div id="box" ref="textbox" contenteditable >出现问题</div>
        </div>
</template>

输出打印如下：

 向div中输入数据时，理论上content的内容应该改变了，但是watch监听不到，没有输出任何内容

该如何解答？？有什么方法可以监听到其中的数据变化吗？？