`triggerRef` reactivity breaks when contents of `shallowRef`'s inner value are passed to child components via props
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
Click the "Double the counts" button. Watch the counts change.
What is expected?
Both lists update.
What is actually happening?
The left list updates the counts, but the right list doesn't.
System Info
Any system, any browser.
Any additional comments?
No response
Possibly the same as #6273? If it is, then I understand this is by design.
How would one handle this case though:
- Get huge array with large amounts of data from e.g. an API/JSON
- Don't make the whole array recursively reactive (use a
shallowRef), but let Vue know whenever it should rerender template content that uses the array or any of its contents.
I suppose it doesn't really make sense to expect non-reactive data to magically become reactive without wrapping everything in Proxies, but maybe there's a way and I just don't know about it?
This is by design, yes. The best way to deal with this scenario would likely be to use immutable data a la React etc.
Appreciate the fast reply! Could you eleborate on this immutable data pattern and how to apply it in Vue? Do you mean working with readonly? Object.freeze? Or more like https://vuejs.org/guide/extras/reactivity-in-depth.html#immutable-data?
The latter. Its basically about not mutating objects, but instead always creating new copies that contain the changes from the previous version
I'll close this issue as it's not a bug. Feel free to reach out for more input in this repo's "Discussions" section or on our Discord chat.