Detect incorrect ref usage in template

[stefnotch]

What problem does this feature solve?

Since #1682 , refs in templates are not deeply unwrapped anymore. However, always remembering that isn't easy.

I frequently type something like

{{element.scope.name}}

when I actually mean

{{element.scope.value?.name}}

Sadly, neither my IDE (Visual Studio Code with Vetur) nor Vue.js catch this issue. At runtime, you simply see nothing. It would be great if that were improved.

What does the proposed API look like?

Maybe the template compiler has enough information to catch such incorrect usage. Otherwise, I guess this is an issue for Vetur?

[posva]

Can you provide more context like about when this is biting you?

[yyx990803]

You can avoid exposing raw refs to the template (i.e retain the old behavior) by wrapping your element property with reactive:

return {
-  element
+  element: reactive(element)
}

It is technically possible to detect such cases in the compiler, but it is something better done at the tooling level (i.e. Vetur) since it involves type checking.