I'm developing this website with vue-next-masonry with this simple config:
{ default: 3, 640: 2 };

I recently added Nuxt's page transitions, and since then, in smartphones (under 640px width), when I open a gallery, images are distributed in 3 columns, and only when I scroll down a bit, it will update to the expected 2 columns. It looks like Nuxt's page transitions are not allowing this plugin to do its magic.

How to reproduce it (in smartphones or using chrome's inspector responsive tools):

1- From the homepage (https://xiana-teimoy-nuxt.vercel.app/), click on any image to go to its gallery. The first picture for instance (btw, some galleries only have one image).

2- You'll see a fancy transition with some blur and opacity animation, and then you'll see the gallery with 3 columns (it should be 2, and it was 2 when there were no page transitions).

3- Scroll down a bit and see how the gallery updates the columns to 2.

I don't think this is a bug in this plugin, but I wonder if anyone knows if there might be some way to fix it. I found no message in the console that could give some hint.

Hi, thank You for your work.
I tried to do the same, then I tried to use your package, and I can't say that It works.

Can i ask you to put demo on jsfiddle?

---App file---
import masonry from 'vue-next-masonry'
app.use(masonry)

---the code in vue file---
   <masonry :cols="3" :gutter="30">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </masonry>

Everything seems to work fine when I use masonry component directly, however things don't seem to work when I use masonry inside a component that takes a slot, all the items are loaded in a single column.

For example, I have a reusable grid-cards component with a loading indicator, load more button, search bar, etc.

<grid-cards v-model:search="search" :loading="loading" :onMore="onMore">
  <resource-card :resource="resource" :key="resource.id" v-for="resource in resources"></resource-card>
</grid-cards>

Inside grid-cards component I use masonry like the following:

<masonry :cols="{default: 4, 1140: 3, 720: 2, 400: 1}" :gutter="{default: '30px', 700: '15px'}">
  <slot></slot>
</masonry>

Any idea why masonry is not working when used with a slot? Do I need to somehow call render directly inside my components updated?