Component template ref watcher triggers before its mounted hook is finished

[johannes-z]

Version

2.7.0-beta.5

Reproduction link

github.com/johannes-z/vue27

Steps to reproduce

1. git clone https://github.com/johannes-z/vue27
2. git checkout bug/template-refs-mounted
3. pnpm i
4. 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