Vue.js 中更新 data 里的值后（数组对象），如何在页面实时显示？

示例代码如下：

<div id="app">
    <i-table stripe :columns="columns1" :data="data1"></i-table>
    <page :total="100" :current="1" @on-change="change"></page>
</app>

<script>
new Vue({
	el: '#app',
	data: {
    	columns1: [
        	{
            	title: 'ID',
                key: 'id'
            },
            
        	{
            	title: 'Title',
                key: 'title'
            }
        ],
        data: []
    },
    mounted: function(){
    	this.data = this.setData();
    },
    methods: {
    	setData: function(){
        	return [
                {
                    id: '1',
                    title: 'Title'
                },
                {
                    id: '2',
                    title: 'Title2'
                },
                {
                    id: '3',
                    title: 'Title3'
                }
            ];
        },
        change: function(current) {
        	self.data = [
            	{
                    id: '4',
                    title: 'Title4'
                },
                {
                    id: '5',
                    title: 'Title5'
                },
                {
                    id: '6',
                    title: 'Title6'
                }
            ];
        }
    }
});
</script>

就是点击分页按钮，出发 change 方法。但是页面上还是原来的数据，并没有改变，难道数组类似的 data 和字符串或者整型类似的不一样吗？