title: Vuejs directive masonry detect prepend to array and redraw properly
body: <p>I am using the <a href="https://github.com/shershen08/vue-masonry" rel="nofollow noreferrer">vue-masonry plugin</a> which let me create a masonry grid easily.</p>
  
  <p>I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.</p>
  
  <p>The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.</p>
  
  <p><a href="https://github.com/shershen08/vue-masonry/blob/master/src/masonry.plugin.js" rel="nofollow noreferrer">The plugin</a> use two Vue Directive <code>masonry</code> (parent) and <code>masonryTile</code> (element). <code>masonryTile</code> has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).</p>
  
  <p>Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw <code>this.$redrawVueMasonry();</code>).</p>
  
  <p>So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...</p>
  
  <p>Thanks in advance for you help</p>
  
  <p>Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !</p>