If a object from deconstruct can't be watch even thought it is a proxy object?

[dddssw]

playground

why can't write like this

`
// change watch tableData in comp.vue not a getter
watch(tableData,(val)=>{
console.log(val,'watch')
},{immediate:true})

`

in the playground ,I printed it.It is a proxy ,right? So,the tableData from Deconstruct is still reactivity proxy

This is a force rule?😢

[linzhe141]

This might be related to this [PR] #7986

Calling watch() directly on a destructured prop is expected to be a common gotcha, so this is detected and will result a compile-time error that nudges the user to use a getter instead

[linzhe141]

This might be related to this [PR] #7986

Calling watch() directly on a destructured prop is expected to be a common gotcha, so this is detected and will result a compile-time error that nudges the user to use a getter instead

When tableData is a ref(0) that changes to ref(100), if no getter is added, it may be in the form of watch(100,()=>{}). If this is the case, then the watch will not be triggered.

[dddssw]

Yes, in your case.It will be a normal type of number without reactivity,but if there is a type of object,maybe I can watch it even though don't use getter.now , It seems that prevent me to do that during compile.

[dddssw]

Actually,I spent many time to study the Watch.It really still make me confused

[s3xysteak]

This is confused for me too, which is the reason why I do not like the destructure props feature.

You can try:

isReactive(tableData) // = true

So tableData is a Reactive, a Reactive can be watch, but tableData cannot be watch. Which make me feel so weird. The destructure props is like a new reactive type for me, different from ref and reactive.

[bydArkantos]

Not sure if you figured it out already, but I asked an AI about this and here's what I learned:

This error happens because the Vue compiler can't tell whether the variable you passed to watch (after destructuring from defineProps) is still reactive or not.

Even if it's obvious to you as the developer, the compiler can't safely assume it, so it prevents you from using it directly.

Instead, you should wrap it in a getter like () => tableData or use toRef(props, 'tableData') to make the reactivity explicit.