How to use Masonry grid layout in vuejs2(with bootstrap) without jquery?

I want to display tweets like card-columns in my page.

I am not able to use Masonry in my vue webpack template. i have used tried it through npm & CDN but not getting grid properly.

in main.js

import Tweet from 'vue-tweet-embed';
import Masonry from 'masonry-layout';

in html

<head>
//....
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
</head>

in template

<div class="grid">
    <div class="grid-item" v-for="i in topics">
        <Tweet class="" :id="i.tweets.quoted_status_id_str" :options="{ theme: 'light' }" error-message-class="text-center text-muted tweet_err"><div class="text-center text-muted card" style="margin-top:12px;min-width:30px;"><i class="ion-social-twitter"></i>Loading tweet...</div></Tweet>
    </div>
</div>

Solution

I have used vue-masonry.

(We need to take care of redraw method this.$redrawVueMasonry(); on update or change.)