求助 Vue 大佬，为什么使用 reactive 数据没有双向绑定？

萌新小白请教，不太明白为什么使用 ref 数据可以双向绑定，使用 reactive 数据无法双向绑定？是我用法不对吗？
到底什么时候应该使用 ref 什么时候应该使用 reactive 呢？

https://play.vuejs.org/#eNp9U8Fu00AQ/ZXRXmJEsIVAHCInElQ9wAEqijj54tqTdMt6d2Wv3UCUOzeEOMAHIHFC8AP8De13MDubpNu09GLtzrx582b9ZiWeWpsOPYqJyLuqldZBh663s0LLxprWwQpanI/pU1ZODghrmLemgREVjXagA9PYTTzN/MVzUrrQWQaV0R3RuvcKD4yeywVMPWey4izMjXbH8gNO4OETjqzvFfr2miDBF+6X+Zo8CxOQdro4bKwqHdINILcwYbJpIVZRadQg3UbhPozscrQuxOzy4+fLb78ufn79++dLnvlHISqedXjQmBoV0UUUhYCMMHkW9RZj4Tqaxnc464ymh2b5haiIRypsX1knadpCTIAzPlcqZc5fcMy1PY638eoUq3e3xM+6pY8V4qjFDtsBC7HLubJdoAvpw+OXuKTzLklT9IrQdyRfY2dU7zUG2LNe1yQ7wrHa5+wEqRdvusOlQ91th/JCPXLN+EKQM/wT/m/0K7mP0sdcR3+XXnHrqn2ngir1gv6DI5rrrg1uGcN56arTPd8SUDts52WFcBy5bM9aum9OaFRNGuKKo9bYLmDZBm9L1RM6IuKSYGLL4CnUOJcauTTn7ywh08a0h410G9qE6Ea9rclEk6sWozEMN1rdm8BgZB11ROLZNWTSnL+bhgGkTFWqG7uVR8SzZAVpmrL+9EoE72eh+VWTiGUMicbzjSaYzsIgXkty6yRMvqtg1rWP1og2uIZjd211LQc+0FGVJ6hmYVUvvv+4+P0pz0JsA5Da9i7a20j5bvU3C0zoLFBfX+X1P0Ky0Q8=

直接展示代码：

App.vue

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

// const styleConfig = ref({
//  fontSize: 16
// })
const styleConfig = reactive({
  fontSize: 16
})
</script>

<template>
  <p :style="{ fontSize: styleConfig.fontSize + 'px'}">我是字体</p>
  <Comp v-model="styleConfig" />
</template>

Comp.vue

<script setup lang="ts">
import { reactive, watch } from 'vue'

interface StyleConfig {
  fontSize: number
}

interface Props {
  modelValue: StyleConfig
}
const props = defineProps<Props>()

interface Emits {
  (e: 'update:modelValue', value: StyleConfig): void
}
const emit = defineEmits<Emits>()

const localConfig = reactive<StyleConfig>({ ...props.modelValue })

watch(localConfig, (newConfig) => {
  emit('update:modelValue', { ...newConfig })
}, { deep: true })
</script>

<template>
  <div>
    <label>字体大小</label>
    <input v-model="localConfig.fontSize" />
  </div>
</template>