Using Masonry.JS and Vue.JS
<p>I know how to use <code>masonry.js</code> apart from vue. However, I'm having issue getting it to function and be called correctly inside of the vue framework. I called it inside of the created or ready but neither seem to get the grid to form correctly. How can i get this to work inside the framework? Oh and I do have jquery called in the html before this script. Here is what I have inside the component : </p>

<p>Edit:</p>

<p>I can see that the masonry is effecting the grid by assigning its height with JS and changing the items to position absolute. However, its not placing them correctly. Its stacking them ontop eachother instead of sideby side like it should be in the grid. 
<a href="https://i.stack.imgur.com/L2ERr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/L2ERr.png" alt="enter image description here"></a></p>

<pre><code>&lt;template&gt;
  &lt;div class="projects--container"&gt;
    &lt;div class="inner-section inner--options"&gt;
        &lt;div class="grid"&gt;
            &lt;div class="grid-item"&gt;&lt;/div&gt;
            &lt;div class="grid-item"&gt;&lt;/div&gt;
            &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
 export default{
    ready: function () {
        this.mason();
    },
     data: function () {
         return {
             options: [
                 {
                   option: 'projects',
                     phrase: 'for clients',
                     slogan: 'slogan...'
                 },
                 {
                     option: 'sides',
                     phrase: 'for us',
                     slogan: 'we love what we make'
                 },
                 {
                     option: 'moments',
                     phrase: 'with the crew'
                 }
             ]
         }
     },
     methods: {
         revert: function () {
             this.$dispatch('return-home', true)
         },
         mason: function () {
             var $grid = $('.grid').masonry({
                 itemSelector: '.grid-item',
                 columnWidth: 250
             });
             $grid.masonry('layout');
         }
     },
     events: {
         'option-select': function (option) {
         }
     }

 }
&lt;/script&gt;
</code></pre>