title: Integrating Isotope and Vue
body: <p>I just started using vue about a month ago and love it so far. Currently I'm running into some issues using it along side <a href="http://isotope.metafizzy.co" rel="nofollow">isotope.js</a>, a slick filtering/sorting/layout library.</p>
  
  <p>The problem is isotope wants to control adding and removing elements in the layout (currently done with jquery). If I add an item with jquery, vue isn't aware of any functionality on the item (looking for events and the like) and if I add with view, isotope doesn't know to arrange the element.</p>
  
  <p>I've illustrated the issue in <a href="https://jsfiddle.net/6y6dsoym/11/" rel="nofollow">this fiddle</a>. Note that clicking removes an element from the container and clicking to remove from isotope also removes the element from the vue container, but not the other other way around. Clicking also tries logging to the console, which of course only works on the elements put into the DOM with v-for.</p>
  
  <p>I've found a temporary work around that manually keeping the two in sync, but it is far from ideal.</p>
  
  <p>What is the idiomatic way to solve for this? Obviously I'd love to be able to use v-for to append and remove items. Is it time for a custom directive? Where do I get started?</p>
  
  <p>Adding elements this way is an anti-pattern, but I don't know how else to make isotope aware of them.</p>
  
  <pre><code>add: function(thing) {
  
    // add to isotope - vue is unaware of the test() fn when it enters the DOM
    this.iso.isotope('insert', $('&lt;span @click="test()" class="thing"&gt;' + thing.name + '&lt;/span&gt;'))
  
    // add to vue
    this.things.push({
      name: thing.name
    })
    this.itemName = ""
  
  },
  </code></pre>
  
  <p>Thanks!</p>