Element ref() returning undefined when called in onMounted() after route update [SSR]
This is a long story that involves nuxt/I18n and FormKit, but I have finally found the culprit and realised that perhaps I have a gap in my understanding of refs and reactivity.
reproduction here: https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-xnuzhm?file=pages%2Findex.vue
You'll need to use the browser console to see what's happening and click the button after changing locales.
Here's what I don't understand:
- When the component is mounted initially, the value of a template element ref is returned just fine. This checks out, so far so good.
- When switching locales, the onMounted() hook is called again, however this time the same ref returns undefined.
What's happening here?
Is onMounted() being called before the component has re-hydrated?
And here's another weird behavior that may or may not be formKit-specific, but I'm mentioning because I've not been able to re-create it any other way. Here's what happens on locale change
- Change locale. Trigger a function (on click, so not immediately in onMounted) that grabs a formkit node. Returns undefined. Weird.
- Change locale again (a minute or an hour later, doesn't matter). Suddenly that formkit node value is being returned even though the method that grabbed it was called a long time ago.
It's almost like the component needs to be re-rendered twice to get the right ref values.
Could someone shed light on what's happening under the hood here? I've been scouring reactivity docs but still can't wrap my head around this.
reproduction here: https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-xnuzhm?file=pages%2Findex.vue
You'll need to use the browser console to see what's happening and click the button after changing locales.
Here's what I don't understand:
- When the component is mounted initially, the value of a template element ref is returned just fine. This checks out, so far so good.
- When switching locales, the onMounted() hook is called again, however this time the same ref returns undefined.
What's happening here?
Is onMounted() being called before the component has re-hydrated?
And here's another weird behavior that may or may not be formKit-specific, but I'm mentioning because I've not been able to re-create it any other way. Here's what happens on locale change
- Change locale. Trigger a function (on click, so not immediately in onMounted) that grabs a formkit node. Returns undefined. Weird.
- Change locale again (a minute or an hour later, doesn't matter). Suddenly that formkit node value is being returned even though the method that grabbed it was called a long time ago.
It's almost like the component needs to be re-rendered twice to get the right ref values.
Could someone shed light on what's happening under the hood here? I've been scouring reactivity docs but still can't wrap my head around this.
