Reactivity with ref() losts when transfer ref properties between the components
Vue version
latest, 3.2.37
Link to minimal reproduction
Steps to reproduce
Check the reporoduction link. After 2 seconds(timeout) element properties reassignes
What is expected?
Take care to 3rd component implementation in reproduction link(I marked it with red). All 3 divs in this component are expected to be replaced with a value that is reassigned on timeout.
What is actually happening?
This only works fine with the first element where the property is only provided by props.config.qwerty
In other cases, the reactivity breaks. The property is provided with const theProperty = props.config.qwerty. But it won't work
System Info
No response
Any additional comments?
No response
That's expected behavior.
Note that if you destructure the props object, the destructured variables will lose reactivity. It is therefore recommended to always access props in the form of props.xxx.
https://vuejs.org/api/composition-api-setup.html#accessing-props
You can use toRef() to get a reactive single ref out of the props object.
Seems like an issue.
Hard to debug a screenshot. Looks like an inconstency wirh thr types when using toRefs() on an optional property.
As rhis is unrelated to
Hard to debug a screenshot. Would assume it's just a type level inconstency with toRefs and an optional prop.
You could open separate issue for this.
toRef() will not have this problem.
toRef also have this problem. So ok, I will open a new issue