Umsetzung Vue.js + Datentabellen richtig

Ich versuche zu implementieren Vue.js + jQuery-DataTables-aber gibt es einen seltsamen Dinge geschehen.

Überprüfen Sie diese Geige auf firefox (nicht bei chrome):
http://jsfiddle.net/chrislandeza/xgv8c01y/

wenn ich den Zustand der DataTable (z.B. Sortieren, suchen, etc.):

• Neu hinzugefügte Daten auf der Liste verschwindet
• Der DOM ist nicht das Lesen der Richtlinien oder der vue Eigenschaften

Ich bin mir ziemlich sicher, dass jeder, der versucht zu mischen vue.js+datatables dieses problem erlebt. was haben Sie getan, um dieses Problem zu lösen?

oder ist es eine Reine Vue.js script/plugin, das die gleiche (oder schließen) Funktionalität wie jquery DataTable? (pagination, Suche, Sortierung, Anzahl der Einträge, um zu zeigen, etc.).

hier ist der code von der fiddle über:

HTML:

<div class='container-fluid' id="app">
        <div class='row'>
            <div class='col-md-9'>
                <table class="table table-bordered" id="app-datatable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Age</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-repeat="user: users">
                            <td>{{ user.name }}</td>
                            <td>{{ user.age }}</td>
                            <td>
                                <button type="button" v-on="click: foo(user)">Action</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class='col-md-3'>
                <div class="form-group">
                    <label>Name</label>
                    <input type="text"
                           class="form-control"
                           v-model="newUser.name"
                           >
                </div>

                <div class="form-group">
                    <label>Age</label>
                    <input type="name"
                           class="form-control"
                           v-model="newUser.age"
                           >
                </div>
                <button type="submit" class="btn btn-primary" v-on="click: addUser()">Add</button>
            </div>
        </div>
    </div>

JavaScript:

$(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);
        }
    }
});

Anregungen sind wir sehr dankbar.