项目结构就是原始的vue-cli 构建的demo, 目的就是想测试下vue + element-ui的组件式开发， 想用在后台开发中。

期望：

父组件加载各个子组件(独立模块)并显示， 每个子组件中自行调用api， 获取数据并渲染View， 然后能在父组件中呈现。

问题：

问题简化为为啥我在created中调用initApiData() 更新了数据， 表格数据依旧不变化呢？

<template>
    <el-container>
        <el-main>
            <el-table :data="tableData">
                <el-table-column prop="date" label="日期" width="140">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script>
//import Users from '@/components/user/Users'

export default {
    name: 'Home',
  data () {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }
    return {
      tableData: Array(20).fill(item),
      tableData2: Array(1).fill(item)
    }
  },
    methods: {
        initApiData: function () {
            let that = this
            console.log('change data...')
            that.tableDate = that.tableData2
            console.log(that.tableData2)
        }
    },
    created: function () {
        console.log('created...')
        this.initApiData()
    }
}
</script>