[2.7.7] Array of template refs are not watchable

[stevebauman]

Version

2.7.7

Reproduction link

codesandbox.io

Steps to reproduce

Create a const els = ref([]) to store an array of HTML elements in a v-for. Attempt to watch(els). Nothing happens.

This worked in 2.6.*.

What is expected?

The watcher function should fire anytime the ref has changed with new elements added in a v-for.

What is actually happening?

The watcher function is not firing.

[yyx990803]

Were you using @vue/composition-api before with 2.6?

This behavior is aligned with Vue 3 - when you directly watch a ref, the watcher only fires when its .value changes. In this case it's always the same array (for performance reasons), so the watcher never fires. I'm not sure what caused @vue/composition-api to fire the watcher in this case, but the Vue 3 behavior should be considered the source of truth here.

Typically, the recommended way to react to array refs change is using onUpdated(). If you only want to do something when the list has really changed, you can use a deep watcher instead (there's no performance concern here because HTMLElements and component instances won't be traversed by deep watch).

[stevebauman]

Hi @yyx990803, thank you so much for the detailed reply.

I'm actually using nuxt:^v2.15.7 with @nuxtjs/composition-api.

This occurred when I attempted to update https://showcode.app using npm update, which bumps the Vue version from v2.6.12, to v2.7.7.

My package.json:

• https://github.com/stevebauman/showcode/blob/3f797b6469b27be59d6cf12f70beb588099bfb61/package.json#L45

The refs that are being watched that previously worked fine:

• https://github.com/stevebauman/showcode/blob/5bfed9f5c74e35889f1702bac4525d077d34cefb/components/Page.vue#L22
• https://github.com/stevebauman/showcode/blob/5bfed9f5c74e35889f1702bac4525d077d34cefb/components/Page.vue#L274-L281

I'll try your suggestion with onUpdated() and give it another go. Thanks again! 🙏

[stevebauman]

I just tried it and this works with onUpdated() thank you! ❤️

[ngekoding]

It is also solve my confusion after updating from 2.6 (with @vue/composition-api) to 2.7.
Then my code need to refactored with adding the deep: true option.

Thanks