Template Ref clientHeight 0 after page change

[chrispreisler]

Environment

• Operating System: Darwin
• Node Version: v16.13.0
• Nuxt Version: 3.0.0-27369360.33ebb01
• Package Manager: yarn@1.22.17
• Bundler: Vite
• User Config: publicRuntimeConfig, buildModules, build, hooks, noopTransform
• Runtime Modules: -
• Build Modules: @vueuse/nuxt@7.5.3

Reproduction

https://stackblitz.com/edit/nuxt3-windicss-t6zmdt?file=pages%2Findex.vue

Describe the bug

I created a reproduction link to show the bug. When loading the page, it gives me the height of the blue container. When navigating to About and back to home, clientHeight suddenly is 0. In my opinion this should work and also worked in nuxt2. Also I created a reproduction with vue3 to check, if it is a vue3 bug. But in vue3 it is working without problems:

https://stackblitz.com/edit/vue3-vue-router-demo-jrbsbi?file=src%2Fviews%2FHome.vue

Thanks guys for your help.

Additional context

No response

Logs

No response

[chrispreisler]

This is fixed by adding a key to

<NuxtPage :key="$route.fullPath" />

[danielrjames]

This is fixed by adding a key to

<NuxtPage :key="$route.fullPath" />

@chrispreisler How did you come to this solution? It solved a similar issue I was having (template ref would not focus in onMounted).

[ninghao]

This is fixed by adding a key to

<NuxtPage :key="$route.fullPath" />

took me two days to find this line of code.