v-model not binding with reactive

[saulortega]

Vue version

^3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9UsFu2zAM/RXCFzuAY689BkmwAetlh2VYt1ymHRyHTpTZkibRKYrA/15KdlKnCKKDTUrkI/n4TtEXY7Jji9EsmrvSSkPgkFqzFEo2RluCE1isUv4UJckjpvBSULmHDiqrG4g5N77E/lZ6uM5ytj0wPwpVI8G2oOLnAAKLC15ygmIG8Sc+cQobNq21MXQTn1dq5c6ZVUiqhvgHPueo0FAyxk8hmcBiCSehADyIrjGr9S6Jf+2lA4VHtLAvjEHlYsboUh5zi2hmQLZFuAHMFNzF/Lp6eh4gA2IAmOc9p8wmO4SNqQvC4AHMN5Yt/nvW5HYhovZBRHCcNnqLNbvjiUS0nHtK+wy/HuAzjsiYlhNPcXUFXRcS8j5jVOrxRqnqXpXqqgB7V9jz/DJdlEa9HKZNYbKD04rFFVgTw4MTEUP14CJikXhfRHsi42Z57qrSK+fgMm13OVuZbRXJBjN0zXRj9YtDy8Ai8hDcRMclB7l91DHUhdrxgL7mWNNbrKTCH1Yb90HKZ9WZ8LYYRybcs6DA2bqoWwxDCBJEr4Ydf1abA5aU9tcW/7fS4rZXlb/zzY6UjY2kS4kndlzyJ24NU4yz9zLx35BStYq3qhWUe54JWY0XKRKsGebb8+p7ZgrrMAmmIyvVTlavSZgle0ecMCDAmne4gPhxOH52XqKk5EYLKay9qu+KmpcZZN0ScZefy1qW/5j6vt1Av2eod4E0nAv3KurTBpixnLo35M6Rmw==

Steps to reproduce

1. Click on the first button. dataReactive (dataReactive = reactive({})) is not updated. Is this a desired effect for reactive? Why?
2. Click on the second button. dataRef (dataRef = ref({})) does is updated.
3. WHY when dataRef is updated is also updated dataReactive? WTF.

What is expected?

1. v-model updating variable declared with reactive.
2. dataReactive not changed when dataRef changes.

What is actually happening?

1. v-model not updating variable declared with reactive.
2. dataReactive changing when dataRef is changed. WTF!

System Info

No response

Any additional comments?

No response

[LinusBorg]

This is all expected behavior. I'll move this to Q&A discussions so the community can help you understand.

[stam]

In your example you aren't actually updating a. In your Uno component you are JSON.parsing + stringifying modelValue, making dataReactive lose reactivity, and then setting the parent state to that unreactive value.

You can either:

1. Not use v-model as you don't need to replace the parent state, a reactive object is deeply reactive so you can just change the a value in place (does not work for ref) example
2. Use a v-model only for a. like this

A ref is a reference, if you want to change it you have to assign a new value to it, like you did in your example.
A reactive is a deeply reactive object, if you want to change it you should change parts of it and not override the reference.

[LinusBorg]

The important point is: reassigning a variable is never reactive (not possible to detect this operation in JS). Consequently, replacing the value of a let variable with something else (regardless of wether or not this new value is a reactive object or not) is not reactive, and therefore, the component won't re-render.

That's pretty much the reason why ref() even exists - they box a value in an object's value property so instead of reassigning a variable, we can now reassign the ref's value property - and observing object property changes is what Vue's Reactivity is built on.

[stam]

But it is possible to detect this operation in JS, by assigning getters and setters using proxies, like you're already doing.
MobX doesn't make this distinction between ref and reactive, and there you don't have to manually unwrap a value

[LinusBorg]

tracking getter and setter access of an object (obj.a = 'new value') != tracking variable reassignment (a = 'new value')

The latter is not possible in Javascript, that's just a fact. As a rule of thumb: if there is no . in the lefthand operation, it's not trackable.

const message = reactive({ text: '' })
let message
const messageRef =  ref()

message.text = 'HelloWorld' // trackable

this.message = 'HelloWorld' // trackable

message = 'helloWorld' // *not* trackable.

messageRef.value = 'HelloWorld' // trackable

MobX also can't make that limitation go away. In MobX every reactive state is based on a class, which is to say: objects. Comparable like reactive() object in Vue. You will always end up with a . on the lefthand side:

A ref is just a small abstraction for a reactive object meant to hold a single value (usually a primitive, but not necessarily).

[saulortega]

Thanks to both of you. Now I understand it.