el-table表头动态渲染未更新

//html
<el-table :data="tableData">
    <el-table-column v-for="(item,index) in tableCol" :key="index">
        <template slot="header">{{item.colName}}</template>
        <template slot-scope="scope">
            {{scope.row[item.prop]}}
        </template>
    </el-table-column>
</el-table>

//js
tableCol:[
    {
        colName: '姓名',
        prop: 'name'
     },
     {
         colName: '年龄',
         prop: 'age'     
     }
]

api.get('/tableColData').then(res=>{
    this.tableCol = res.data
})