JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/yyx990803/vue/v2.0.1/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="demo">
  <repeater inline-template :items-data="[{&quot;id&quot;:1,&quot;role_id&quot;:1,&quot;priority&quot;:1,&quot;disallow&quot;:0,&quot;permission&quot;:&quot;Test*&quot;,&quot;created_at&quot;:&quot;2016-10-01 16:44:02&quot;,&quot;updated_at&quot;:&quot;2016-10-01 16:44:02&quot;},{&quot;id&quot;:2,&quot;role_id&quot;:1,&quot;priority&quot;:2,&quot;disallow&quot;:1,&quot;permission&quot;:&quot;Lorem Ipsum&quot;,&quot;created_at&quot;:null,&quot;updated_at&quot;:null}]" v-cloak>
                <div class="table-responsive">
                    <table class="table permissions-table">
                        <thead>
                            <th>Priority</th>
                            <th>Permission</th>
                            <th>Disallow</th>
                            <th></th>
                        </thead>
                        <tbody>
                          <tbody>
                            <tr class="repeater-item" v-if="false">
                                <td>
                                    <button type="button" class="btn default sm"><i class="fa fa-crosshairs"></i></button>
                                </td>
                                <td class="repeater-index">
                                    1
                                </td>
                                <td>
                                    <input type="text" name="permission" class="form-control">
                                </td>
                                <td>
                                    <input type="checkbox" name="disallow">
                                </td>
                                <td>
                                    <button type="button" class="btn default sm"><i class="fa fa-plus-circle"></i></button>
                                    <button...

CSS

/***
VueJS - cloaking not yet fully rendered components
***/
[v-cloak] {
  display:none;
}

JavaScript

var Repeater = Vue.extend({
		name: 'repeater',
    props: ['items-data'],
    data: function () {
    	return { items: [] };
    },
		created: function () {
    	this.items = this.itemsData || [];
    },
    methods: {
        updateIndexes: function () {
        },
        remove: function(item) {
            this.items.splice(this.items.indexOf(item), 1);
        },
        add: function() {
            this.items.push({priority: 0, permission: "test", disallow: 0});
        }

    },
});

new Vue({
  el: '#demo',
  components: {
  	'repeater': Repeater
  }
});