Watch with getter doesn't react on object property (with ref)

[TheEvilCoder42]

Version

2.7.8

Reproduction link

codesandbox.io

Steps to reproduce

Change the text in the first (testRefObj) input field.

Watch using a getter on an object property made reactive using ref()

What is expected?

Console should log watch testRefObj.text + the changed text. Same as the second input (string). (In component HelloWorld.vue)

What is actually happening?

Only watch deep testRefObj gets logged (watch with deep: true on whole object, instead of a single property by getter)

---

It's stated here to use a getter to watch on a single property of an object, but this doesn't work: https://vuejs.org/guide/essentials/watchers.html#watch-source-types

deep: true is a workaround, but on objects with complex structures and more data, this will result in performance issues.

[nooooooom]

Maybe you should watch the () => testRefObj.value.text.

[Jackllllll]

() => testRefObj.value.text it would be appear error! He should be use const testRefObj= reactive({text:''}) and watch(() => testRefObj.text,value => {/* ... */}) and more https://vuejs.org/api/reactivity-core.html#watch

[TheEvilCoder42]

@Jackllllll Seems you're right, it works with reactive() (updated example). Maybe I didn't understand the difference to ref(), I thought that I can't update the object (which I need to), but apart from not using the .value syntax, it seems to work. But ref() should just call reactive() on an object, as stated here: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref So maybe that's the real error here.

[nooooooom]

Hey, ref is just a nested layer of responsive value compared to reactive, the important thing is not whether to use ref or reactive to define the value, but how you can make watch subscribe to it.

In the case, the get of text is wrong, you should get the value defined on ref by testRefObj.value.text.

[TheEvilCoder42]

@nooooooom I was quite sure this would give an error (since it's not "reactive" - like @Jackllllll said), but actually it does work. Seems this should be mentioned in the docs.

[Jackllllll]

@nooooooom u can try own ide! To verify it's right by example of codesandbox.io

[TheEvilCoder42]

@Jackllllll I updated the example with the suggestion from @nooooooom and it does work 👍

[yyx990803]

This seems to be a misunderstanding so there's nothing to fix here.