Javascript VueJS砌体布局图

目前，我正在处理VueJS项目及其vue cli 3。我正试图在我的Vue项目中实现MasonryJS，但我被卡住了。我不明白如何为我的vue项目实现这种砌体布局

；
（功能（窗口）{
/**
*GridLoaderFx obj。
*/
函数GridLoaderFx（el，选项）{
this.el=el；
this.items=this.el.querySelectorAll（'.grid\uuuu item>.grid\uu link'）；
}
/**
*效果。
*/
GridLoaderFx.prototype.effects={
"舒":{
线条画：对，
动物牵引点：{
持续时间：800，
延迟：功能（t，i）{
返回i*150；
},
放松：“放松，放松”，
strokeDashoffset:[anime.setDashoffset，0]，
不透明度：[{
值：[0，1]
},
{
值：[1，0]，
持续时间：200，
“线性”，
延误：500
}
]
},
动物：{
持续时间：800，
宽松：[0.2,1,0.3,1]，
延迟：功能（t，i）{
返回i*150+800；
},
不透明度：{
值：[0，1]，
放松：“线性”
},
比例：[0.5,1]
}
}
};
GridLoaderFx.prototype.\u render=函数（效果）{
//重置样式。
这个；
var self=这个，
effectSettings=this.effects[effect]，
animeOpts=effectSettings.animeOpts
if（effectSettings.perspective！=未定义）{
[].slice.call（this.items）.forEach（函数（item）{
item.parentNode.style.WebkitPerspective=item.parentNode.style.perspective=effectSettings.perspective+'px'；
});
}
if（effectSettings.origin！=未定义）{
[].slice.call（this.items）.forEach（函数（item）{
item.style.WebKittTransformOrigin=item.style.transformOrigin=effectSettings.origin；
});
}
if（effectSettings.lineDrawing！=未定义）{
[].slice.call（this.items）.forEach（函数（item）{
//创建SVG。
var svg=document.createElements（'http://www.w3.org/2000/svg“，”svg“，
path=document.createElements（'http://www.w3.org/2000/svg“，”路径“，
itemW=item.offsetWidth，
itemH=item.offsetHeight；
setAttribute（'width'，itemW+'px'）；
setAttribute（'height'，itemH+'px'）；
setAttribute（'viewBox'，'0'+itemW+''+itemH）；
setAttribute（'class'，'grid___deco'）；
setAttribute（'d'，'M0,0 l'+itemW+'，0 0'，+itemH+'-'+itemW+'，0 0，-'+itemH）；
path.setAttribute（'stroke-dashoffset'，anime.setDashoffset（path））；
appendChild（路径）；
item.parentNode.appendChild（svg）；
});
var animeLineDrawingOpts=effectSettings.animeLineDrawingOpts；
animeLineDrawingOpts.targets=this.el.queryselectoral（'.grid\uu deco>path'）；
动画。移除（动画拖动目标）；
动漫（animeLineDrawingOpts）；
}
if（effectSettings.revealer！=未定义）{
[].slice.call（this.items）.forEach（函数（item）{
var revealer=document.createElement（'div'）；
revealer.className='grid_u_-reveal'；
if（effectSettings.revealerOrigin！=未定义）{
revealer.style.transformOrigin=effectSettings.revealerOrigin；
}
if（effectSettings.revealerColor！=未定义）{
revealer.style.backgroundColor=effectSettings.revealerColor；
}
item.parentNode.appendChild（revealer）；
});
var animeRevealerOpts=effectSettings.animeRevealerOpts；
animeRevealerOpts.targets=this.el.queryselectoral（'.grid\uuu-reveal'）；
animeRevealerOpts.begin=函数（obj）{
对于（变量i=0，len=obj.animatables.length；i.control\uu btn'）），
//GridLoaderFx实例。
装载机=[]，
装船时间；
函数init（）{
//预加载图像
imagesLoaded（主体，函数（）{
//初始化每个网格上的砌体。
grids.forEach（函数（网格）{
var m=新砌体（网格{
项目选择器：'.grid\u项目'，
columnWidth:“.grid\u sizer”，
位置：正确，
转换持续时间：0
});
砌体.推力（m）；
//隐藏网格。
add（'grid--hidden'）；
//初始化GridLoaderFx
import Masonry from "masonry-layout";

export default {

    mounted: function () {

        // initialization of masonry

        var grid = document.querySelector('.masonry-grid');
        var msnry = new Masonry( grid, {
            // options...
            columnWidth: '.masonry-grid-sizer',
            itemSelector: '.masonry-grid-item',
            percentPosition: true
        });
    }
}

  <template>
   <div>
    <!-- Blog Masonry Blocks -->
    <div class="container ">
        <div class="masonry-grid row ">
            <div class="masonry-grid-sizer col-sm-1"></div>

            <div class="masonry-grid-item col-lg-3">
                ...
            </div>

            <div class="masonry-grid-item col-lg-3">
                ...
            </div>

            <div class="masonry-grid-item col-lg-3">
                ...
            </div>
        </div>
    </div>
  </div>
</template>

<masonry
  :cols="3"
  :gutter="30"
  >
  <div v-for="(item, index) in items" :key="index">Item: {{index + 1}}</div>
</masonry>