Visual Bug in Nuxt3 page transition

[jakhsu]

Reproduction link:

Stackblitz

Describe the bug I'm using vue-grid-layout in a pretty standard way and it has weird visual bug when I use a <NuxtLink> to move into a page with a vue-grid-layout with page transition applied. And seems to only happen when the transition mode is set to out-in

Would appreciate if anyone with experience with Nuxt3 can point me to why this happens?

To Reproduce Steps to reproduce the behavior:

1. Open sandbox -> yarn install dependencies -> yarn dev
2. Click on "to grid page" link
3. You'll see the grid items are all jammed together, no the expected behavior, and upon inspecting devtool the data needed for vue-grid-layout is all there
4. Stay on the page and refresh, the layout will be displayed as normal, probably since page transition is not applied this way

Expected behavior Expect the grid layout to display the grid items as the layout array as normal

Screenshots

[jakhsu]

Update:

After digging into Nuxt's issues more I found: https://github.com/nuxt/nuxt/issues/13471 which seems to apply to my case

So I added:

onMounted(() => {
  console.log('onMonuted Hook:')

  console.log("document.querySelector('.vue-grid-layout'): ", document.querySelector('.vue-grid-layout'))

  setTimeout(() => {
    console.log('setTimeout 0ms')
    console.log("document.querySelector('.vue-grid-layout'): ", document.querySelector('.vue-grid-layout'))
  }, 0)
})

And repeat the steps to create error, now console logs:

onMonuted Hook:
instrument.ts:132 document.querySelector('.vue-grid-layout'):  null
instrument.ts:132 setTimeout 0ms
instrument.ts:132 document.querySelector('.vue-grid-layout'):  null

so apparently the container div for the grid items is not mounted just yet.

Still haven't figured out a solution yet, any advice is appreciated