Vue-masonry plugin doesn't work with Vuetify - vue.js

Question

I try to implement masonry grid via vue-masonry plugin. I use Nuxt and Vuetify. It seems like vue-masonry doesn't do work with vuetify.
I connect vue-masonry as plugin (vue-masonry.js) to my Nuxt project
import Vue from 'vue'
import {VueMasonryPlugin} from 'vue-masonry'
Vue.use(VueMasonryPlugin)
I setup the plugin in nuxt.config.js
plugins: [
{ src: '~/plugins/vue-masonry', ssr: false }
],
Next I try to use vuetify grid with vue-masonry, and here things broken
<template>
<v-container>
<v-row>
<v-col
xs="12"
sm="6"
md="4"
lg="3"
v-for="card in cards"
:key="card.id"
v-masonry
origin-left="true"
horizontal-order="true"
transition-duration="0.3s"
item-selector=".item"
>
<v-card v-masonry-tile class="item" max-width="240">
<v-card-title>{{card.title}}</v-card-title>
<v-card-text class="text-ellipsis">{{card.text}}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
return {
cards: [
{
id: 1,
title: "title",
text:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make",
},
{
id: 2,
title: "new one",
text:
"Lorem Ipsum has when an unknown printer took a galley of type and scrambled it to make",
},
{
id: 3,
title: "title",
text:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. took a galley of type and scrambled it to make",
},
{
id: 4,
title: "title",
text:
"Lorem Ipsum is simply dummy. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
},
{
id: 5,
title: "title",
text:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
},
{
id: 6,
title: "title",
text:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. a galley of type and scrambled it to make",
},
{
id: 7,
title: "title",
text:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
},
{
id: 8,
title: "title",
text:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley",
},
{
id: 9,
title: "title",
text:
"Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
},
{
id: 10,
title: "title",
text: "Lorem Ipsum is simply industry.",
},
],
};
},
};
</script>
masonry grid doesn't appear, just clear vuetify cols with cards.
How can I achieve masonry grid with vuetify? I'll be glad any suggestions and implementations masonry grid with vuetify.

Answer 1

I found a right grid solution for vue-masonry with vuetify! It works like a charm =)
<template>
<v-container>
<v-row
v-masonry
origin-left="true"
horizontal-order="true"
transition-duration="0.3s"
item-selector=".item"
>
<v-col
v-masonry-tile
class="item"
v-for="card in cards"
:key="card.id"
xs="3"
sm="6"
md="4"
lg="3"
>
<v-card>
<v-card-title>{{ card.title }} {{ card.id }}</v-card-title>
<v-card-text>{{ card.text }}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>