[Vuejs]-How do Template Refs work inside a constant?

Using the ref turns list into reactive variable. Whenever new item is appended or it is otherwise mutated, the other functions or template parts watching it get updated. In your example without ref, when you append a new item to the list, it won’t be automatically rendered in the template.

I can understand your confusion and I assume you probably come from vue2 world. I can’t recommend enough reading vue3 docs about reactivity.

These are two different types of refs:

• itemRefs is an array of template ref. It’s a reference to an html element / vue component from your component template. It’s associated to the ref attribute on the element.
• list is a "regular" ref. It adds reactivity over the array of values. Without it, Vue won’t react to the value changes and won’t update the rendered component.