Vue-next: Nested refs are not unwrapped in templates

[Jexordexan]

Version

3.0.0-alpha.7

Reproduction link

https://codesandbox.io/s/vue-3-ref-error-5xwws

Steps to reproduce

Open the sandbox and notice the nested ref is rendered as JSON. From looking at the code, this seems somewhat intentional? Nevertheless it was confusing and I just want to bring it up!

What is expected?

All refs are unwrapped in a template

What is actually happening?

Only top-level refs are unwrapped

---

Hope VueConf went well :) I was supposed to go but was grounded due to Coronavirus travel restrictions.

[underfin]

Fix at https://github.com/vuejs/vue-next/commit/e67f655b2687042fcc74dc0993581405abed56de

[yyx990803]

Closing (commit released in alpha.8)

[asv1]

Does this bug is fixed? I check with latest vue 3 version and nested ref is not unwrapped. Looks like in final version bug is returned.

[aztalbot]

It's not a bug. I believe the decision to only unwrap refs at the root level of the returned object from setup() was made and implemented here. The docs could probably be more clear and specific about this, though, particularly since the behavior changed multiple times during the alpha and beta phases. The docs currently just say:

Note that refs returned from setup are automatically unwrapped when accessed in the template so you shouldn't use .value in templates.

and

When a ref is returned as a property on the render context (the object returned from setup()) and accessed in the template, it automatically unwraps to the inner value. There is no need to append .value in the template