Why doesn't the watch function work?

[123456hawkins]

I define a ref in the parent component and then pass it to the child component：

<div class="tableBtn" @click="reNameItem(scope.row)">
          <img src="@/assets/img/layout/edit.png" alt=""> 重命名
</div>
<expModal ref="modal" :reForm="reForm" modalTitle="修改项目" @creatEd='creatEd'></expModal>
<script setup lang='ts'>
let reForm = ref<RuleForm>({
  name: "",
  tag: "",
  id: 0,
  uid: 0,
  last_modify: ''
})
const reNameItem = (val: any) => {
  console.log('重命名', val);
  reForm.value = val
  modal.value.showModal()
}

Child components receive reFrom via defineProps

interface RuleForm {
  name: string,
  tag: string,
  id?: number
  uid: number,
  last_modify: string
}
//Why is it that the reForm I defined in the parent component is of type ref, and when passed to the child component via props it becomes of type reactive?
const props = withDefaults(defineProps<{ reForm: RuleForm }>(), {
  reForm: () => {
    return {
      name: "",
      tag: "",
      id: 0,
      uid: 0,
      last_modify: ''
    }
  }
})
let ruleForm = ref<RuleForm>({
  name: "",
  tag: "",
  id: 0,
  uid: 0,
  last_modify: ''
})
//Why doesn't the watch function work
watch(props.reForm, () => {
  console.log("=====》传进来的props reform", props.reForm);
  ruleForm.value = props.reForm
})
//but the watchEffect work
watchEffect(() => {
  console.log("====>props.reForm", props.reForm);
  ruleForm.value = props.reForm
})

[Alfred-Skyblue]

When accessing props.reForm with watch, it will not be tracked by the effect. Therefore, you must pass a function to watch. Assuming reForm is a string like 'foo', when passed to watch, it will be handed over to the effect to track, resulting in effect(() => 'foo'). Therefore, it is essential to ensure that you pass a function that can access the reactive variable, such as () => props.reForm. This way, it will be tracked as effect(() => props.reForm), allowing normal triggering of updates.

watch(()=> props.reForm, () => {
  console.log("=====》传进来的props reform", props.reForm);
  ruleForm.value = props.reForm
})

[123456hawkins]

thanks！