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

This issue has been created since 2022-07-28.



Reproduction link

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:

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

nooooooom wrote this answer on 2022-08-05

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

Jackllllll wrote this answer on 2022-08-05

() => testRefObj.value.text it would be appear error! He should be use const testRefObj= reactive({text:''}) and watch(() => testRefObj.text,value => {/* ... */}) and more

TheEvilCoder42 wrote this answer on 2022-08-05

@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:
So maybe that's the real error here.

nooooooom wrote this answer on 2022-08-05

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 wrote this answer on 2022-08-05

@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 wrote this answer on 2022-08-05

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

TheEvilCoder42 wrote this answer on 2022-08-05

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

yyx990803 wrote this answer on 2022-08-19

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

More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-09-27
Star Count 199644
Watcher Count 6098
Fork Count 32848
Issue Count 587


Issue Title Created Date Comment Count Updated Date
"cannot call non-const fn `kani::assert` in constant functions" 8 2022-08-25 2022-08-30
mini-css-extract-plugin logic is broken 2 2019-05-03 2022-07-16
Unnecessary breaking change was made to ServicePlugin interface 1 2021-11-19 2022-08-22
Collaboration on Papers With Code 0 2020-06-14 2022-05-21
Finbuckle not working with EF Core 6 rc 3 2021-10-23 2022-08-20
Protege 5.5.0 has trouble parsing QUDT 1 2021-02-04 2022-07-19
Traefik dashboard unaccessible 6 2021-01-06 2022-09-24
compiling pg_repack on Ubuntu 12.04 with packages [SOLVED] 3 2015-10-16 2022-08-31
I need to group bar charts followed by some space and continue showing grouped bar charts 1 2021-09-13 2022-09-13
Hello Everyone, I can`t add "MPAndroidChart" to my Android Studio My version of Android Studio: 7.0.2 1 2021-09-27 2022-09-13
update this demo, probably use Jest 1 2018-05-29 2022-09-12
Regression: 1.29 fails to compile gir-to-d while 1.28 succeeded - undefined reference to `_D6object__T8opEqualsTxC3gtd11GirFunctionQnTxQwZQBkFxQBexQBiZb' 10 2022-06-20 2022-07-24
Naming of flag macros 3 2021-07-07 2022-09-10
Components not recognized 3 2022-01-24 2022-09-17
Send email with gmail account 0 2021-05-10 2022-09-15
Drag and drop categories not working 0 2022-09-13 2022-09-21
Default <webpack-config>.output.publicPath read by publicPath results in an invalid manifest.json file. 4 2021-02-16 2022-09-17
[Question] Local authentication mixed with user registration? 5 2021-01-26 2021-12-05
Is there exists a option which can disable show git brach panel when do helm-browse-project? 1 2021-11-03 2022-09-19
SubscribeMessage 发送订阅消息,Data 类型是不是错了 5 2021-08-26 2022-09-03
希望图床管理增加上传功能,目前只有删除? 1 2021-05-11 2022-09-08
建议图床配置选择自动目录后每天可以更新目录 2 2021-04-29 2022-08-29
Request Support for BLS12 based signature verification 1 2021-09-27 2022-09-07
Website doesn't show up on Google search 3 2020-12-06 2022-09-23
Validate shader build pipeline with DXC 1.6.2106+. Validate data layout produced '-fvk-use-dx-layout' matches dx12 rules. 0 2021-09-21 2022-09-03
Complete end-to-end acknowledgements 1 2021-11-02 2022-08-13
Sections in tutorials can not be linked to 5 2021-08-05 2022-09-24
Support efficiency technique 1 2021-12-26 2022-09-09
[Stable 20.03] Shutdown restarts instead of turning off 6 2022-02-24 2022-09-24
No email notification for requestable assets - unsure if this is a bug 26 2022-03-10 2022-09-23
LDAP sync doesn't update other attributes if they change 1 2022-03-08 2022-09-24
Getting 500 Server Error after Upgrade 9 2022-03-09 2022-09-19
F to follow causes the letter f to be inserted into search field upon completion of area 1 2022-04-10 2022-09-08
[BugFix] be crash when using snappy for page compression 0 2022-09-06 2022-09-06
starrocks/output/be/lib/starrocks_be: symbol lookup error: undefined symbol: _dl_sym, version GLIBC_PRIVATE 0 2022-09-06 2022-09-06
can anyone explain the permission it requests access to 2 2021-04-26 2022-09-16
Bug: electrs leaking privacy sensitive scripthash values into logs 1 2022-06-03 2022-07-18
Multi-text Color Field validation 6 2021-08-10 2022-09-22
Selectively hiding subgraph elements from the supergraph API (`@inaccessible`) 3 2021-11-09 2022-09-08
Error in line 19 1 2020-03-26 2022-01-21
Validation isn't occurring for external $refs, even after lazy-loading and rendering them. 0 2021-11-12 2022-09-19
PDF rendering failure due to absolute short path name on Windows for figures 7 2021-06-06 2022-09-07
[tufte_html] Small width of code blocks when highlight is not default 4 2016-05-23 2022-09-18
HTTP Listener rules fail to be created all of a sudden 8 2022-08-02 2022-09-15
Forward/back buttons for navigating mail 0 2022-04-24 2022-09-09
How to set Listener when Ripple ended? 0 2016-05-18 2022-09-25
Duplicate contacts in dialer's contact list 5 2022-03-15 2022-09-11
MGR High Avaliable Discovery config auto task not found current primary 5 2021-10-16 2022-08-17
correct maven central badge 0 2021-03-23 2022-09-23
Flutter not able to deploy to physical iOS device 4 2019-02-11 2022-09-21