JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<div id="app">
    <button @click="addMockData">Add Data</button>
    <data-table v-if="list !== null" :head="list.head" :data="list.body"></data-table>
</div>

JavaScript

const MOCK_DATA = {
	head: [
    	{title: 'ID'}, 
        {title: '標題'}
    ],
    body: [
        [1, '測試資料1'],
        [2, '測試資料2'],
        [3, '測試資料3'],
        [4, '測試資料4'],
        [5, '測試資料5'],
        [6, '測用資料6'],
    ]
}

Vue.component('data-table', {
	props: ['head', 'data'],
    template: '<table></table>',
    data() {
    	return {
        	instance: null
        }	
    },
    watch: {
    	data: function(newData) {
			if(this.instance) {
            	this.instance.clear();
            	this.instance.rows.add(newData);
            	this.instance.draw();
            }
		}
    },
    ready() {
    	this.instance = $(this.$el).dataTable({
        	columns: this.head,
        	data: this.data
        }).api()
    }
})

new Vue({
	el: '#app',
    data() {
    	return {
        	list: null
        }
    },
    methods: {
    	fetch() {
        	setTimeout(() => {
            	this.list = MOCK_DATA
            }, 500)
        },
        addMockData() {
        	let id = this.list.body[this.list.body.length - 1][0] + 1
        	this.list.body.push([
            	id,
                `測試資料${id}`
            ])
        }
    },
    
    ready() {
    	this.fetch()
    }
})