Component template ref watcher triggers before its mounted hook is finished #12578
Description
Version
2.7.0-beta.5
Reproduction link
Steps to reproduce
- git clone https://github.com/johannes-z/vue27
- git checkout bug/template-refs-mounted
- pnpm i
- pnpm run dev
What is expected?
The template ref watcher should be called once the mounted hook is finished.
What is actually happening?
The template ref watcher gets called immediately, so that data assigned in the mounted hook are not called yet and accessing public methods/properties are still undefined.
See the setup in InfiniteLoaderWrapper.vue. Using @vue/composition-api and vue ^2.6 the watcher would be called when the mounted hook is finished. With vue ^2.7 the watcher of the template ref is called immediately upon instantiation, so that vm.stateChanger is still undefined!
setup (_, { emit }) {
const infiniteLoader = ref(null)
onMounted(() => {
// prints object
console.log(infiniteLoader.value.stateChanger);
})
const unwatch = watch(infiniteLoader, (vm: any) => {
// prints undefined
console.log(vm.stateChanger);
if (!vm) return
emit('infinite', vm.stateChanger)
unwatch()
})
return {
infiniteLoader,
}
}This is how the property gets assigned in the library component I'm using: https://github.com/PeachScript/vue-infinite-loading/blob/master/src/components/InfiniteLoading.vue#L218