Height 0px and positions of all items aren't set. Nuxt 3, Vue 3

[IDontLikeOpen]

Here's my plugin

import { VueMasonryPlugin } from 'vue-masonry';

export default defineNuxtPlugin((context) => {
  context.vueApp.use(VueMasonryPlugin);
});

Component code

<template>
  <div class="contest-grid">
    <client-only>
      <div
        v-masonry
        transition-duration="0.3s"
        item-selector=".contest-grid__card-wrapper"
        column-width=".contest-grid__col"
        gutter=".contest-contest-grid__gutter"
        class="contest-grid__cards"
      >
        <div class="contest-grid__col"></div>
        <div class="contest-grid__gutter"></div>

        <div
          v-masonry-tile
          v-for="(item, index) in cards"
          :key="index"
          class="contest-grid__card-wrapper"
        >
          <div
            class="contest-grid__card"
          >
           {{ item.description }}
         </div>
        </div>
      </div>
    </client-only>
  </div>
</template>

<script>
const cards = [
 // some data
];

export default {
  name: 'ContestGrid',
  data() {
    return {
      cards,
    };
  },
};
</script>

<style lang="scss" scoped>
.contest-grid {
  &__cards {
    min-height: em(100);
    width: 100%;
  }

  &__col {
    width: 25%;
  }

  &__gutter {
    width: em(35);
  }

  &__card-wrapper {
    height: em(287);
    width: 25%;
  }

  &__card {
    width: 100%;
    height: 100%;
  }
}
</style>

as a result contest-grid__cards has height 0px and all the cards are stacked in one place

[TsingfunLee]

I encountered it, too.