title: Implementing Vue.js + DataTables properly
body: <p>Im trying to implement Vue.js + jQuery's DataTables but there's a weird things happening.</p>
  
  <p>Check this fiddle <s>on firefox (not working on chrome)</s>: 
  <a href="http://jsfiddle.net/chrislandeza/xgv8c01y/" rel="noreferrer">http://jsfiddle.net/chrislandeza/xgv8c01y/</a></p>
  
  <p>when I change the state of DataTable (e.g. sort, search, etc.):</p>
  
  <ul>
  <li>Newly added data on the list disappears</li>
  <li>The DOM is not reading the directives or the vue properties</li>
  </ul>
  
  <p>I'm pretty sure anyone who tried to mix vue.js+datatables experienced this problem. what did you do to solve this?</p>
  
  <p>or is there a pure Vue.js script/plugin that has the same (or close) functionality like jquery's DataTable? (pagination, searching, sorting, number of entries to show, etc.).</p>
  
  <p>here's the code from the fiddle above:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='container-fluid' id="app"&gt;
          &lt;div class='row'&gt;
              &lt;div class='col-md-9'&gt;
                  &lt;table class="table table-bordered" id="app-datatable"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Name&lt;/th&gt;
                              &lt;th&gt;Age&lt;/th&gt;
                              &lt;th&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr v-repeat="user: users"&gt;
                              &lt;td&gt;{{ user.name }}&lt;/td&gt;
                              &lt;td&gt;{{ user.age }}&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;button type="button" v-on="click: foo(user)"&gt;Action&lt;/button&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div class='col-md-3'&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text"
                             class="form-control"
                             v-model="newUser.name"
                             &gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Age&lt;/label&gt;
                      &lt;input type="name"
                             class="form-control"
                             v-model="newUser.age"
                             &gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-primary" v-on="click: addUser()"&gt;Add&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function () {
      var dT = $('#app-datatable').DataTable();
  });
  
  var vm = new Vue({
      el: '#app',
      data: {
          newUser: {},
          users: [
              {name: 'Chris', age: 1},
              {name: 'John', age: 2}
          ]
      },
      methods:{
          addUser: function(){
             this.users.push(this.newUser);
             this.newUser = {};
          },
          foo: function(user){
              console.log(user.name);
          }
      }
  });
  </code></pre>
  
  <p>any suggestions are greatly appreciated.</p>