this.$refs.name is sometimes not reactive

[b-valdez]

Version

3.6.0-alpha.6

Reproduction link

play.vuejs.org/

Steps to reproduce

1. check "Render Foo".
2. change the text in the input field.
   • Note that the text below the input doesn't change
3. Uncomment the commented out line, repeat prior steps.
   • Note that now the text below the input is kept in sync

What is expected?

The commented out line should not be affecting the reactivity of the computed value.
I expect it to be reactive in either case.

What is actually happening?

A line of code in setup() which seems to be dead code affects the reactivity of computed properties.

---

I noticed the bug when I recently upgraded from 3.5.13 to 3.5.25 and noticed a computed value isn't working anymore. I found the behaviour used in the reproduction while writing a workaround. Interestingly this behaviour was already present in 3.5.13 and other components that rely on exactly the same behaviour of exactly the same component still work, despite there being no other lines that refer to the ref (as that was the point of using computed in the first place). So a complex enough component might always be in the reactive case.

[edison1105]

This behavior is expected.

$refs itself is not reactive. When you access this.$refs.foo in a computed, Vue's reactivity system does not track this access. Therefore, when the value of $refs.foo changes, the computed will not recompute. useTemplateRef defines a getter/setter on refs[key] that is linked to a shallowRef. When the template ref is set, the computed will be recomputed.

useTemplateRef exists precisely to provide reactive access to template references.