Unable to use v-model on nested refs without WritableComputedRef proxy workaround: Type 'Ref<number, number>' is not assignable to type 'number'.

[ratijas]

Vue version

3.5.25

Link to minimal reproduction

https://play.vuejs.org/#eNqtVMtu2kAU/ZVbb0JUY5Km2bgkUh9ZtFKTKM3SUjOYC0wwM9Y8KAj533tmzLNFrLIAje/z3HMfq+RzXWdzz0me9G1pZO3IsvM1VUKNb4rE2SK5LZSc1do4WlGpZ7V3PEzJ8IgaGhk9ozMEONsauWXNsHz6T1+oUivrqK6EVHQTInQuzoNcKsdmJEomwKnY0qpQRNoAA9s8hOorPxuwAZRmF0hE43zjdPOPWxs/Xbv0evQ8kZYqraf4l1MmocgrxSVbK8yS9JxNqK+SpXBS7/AavVgi+qb2DZZOTDdm1zlvMxNSOm/UGli2RpLNReU5GDQAQ4HgThTl1Ebauh/zQ+ID/yYy1u+13QIh+HAM1MIxvoj6k8vbx0BxTqvVmuym6fcgjmqpUEXsEvobMxUJ5TOp8HkRn2KB52V4z7szPeQqa3FCGsNB0WtjDczmhej3bMFOzHpYyEH6d91uWywbo01OA8MCDXETJuuML0Egp1QKb9HD1vKlFOoM7bZWjhU5HTpSs3FLKpKWm4S0omvwqWGmSA9euXQv0bvbfYOyD+s5Wf/7OC4t93Fw3o77EG6du9/b63mSYk8xqyM5zl6tVljmOFBFEkZWVmwe6jDQAA5cLaeoqar0nx9RBt45jmb0mXA5PSJ/tYsgK5JHw5bNHNC3OicM9qBV3/265wXeWyXK8BWsTyif2OrKx6WLZl+8GgL2nl1E+z1eGKnGz/Zu4VjZTVEB6G7BMBWev54ofQf3KvsY/bBXYHHdZmfB4OE1C9HC7uMUpfSNuX5iMdSqWqb0UywHKADyvZMXIRTJp8JgQfHjRYx25NBBSfRw5NSlQdWEPyD7jdsUqgWwq+w6+3CdNH8BXpruOQ==

Steps to reproduce

1. Get an object with a nested (non top-level) ref.
2. Try to bind that ref to a v-model.
3. In the playground example, try using the "Nested" slider, then "Nested+proxy"

What is expected?

All three sliders should work.

One could expect that v-model, being a shorthand for prop .value and signal/event handler .value = newValue, should be accepting writable refs, not matter where they come from.

What is actually happening?

Instead,

• only top-level refs are working (first and third sliders),
• but trying to bind a nested ref (second slider) breaks the whole object,
• and complains with TypeScript error Type 'Ref<number, number>' is not assignable to type 'number'. (on my local setup, but not on the Playground for some reason).

As you can see in the Playground code, I had to resort to an otherwise pretty pointless computed({get, set}) proxy just to get the slider accept my Ref as a model.

System Info

Firefox: 145.0.2
vue: 3.5.25

Any additional comments?

I don't get it, how can the type of v-model= be just a number, and not some sort of ModelRef or whatever writable Ref? What kind of black magic syntax desugaring prevents this from working as expected?

[KazariEX]

Just use v-model="apples.oranges.value".

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-when-unwrapping-in-templates

[ratijas]

After I posted, I eventually realized I could "just use .value", but now I'm even more confused. That .value is supposed to dereference a ref, and a raw value should be assigned to v-model, losing the ability to write back. What kind of black magic causes it to work like it was a ref itself?