vue数据更新了，视图没有更新，但是在不刷新页面的情况下子组件中调用created,视图就更新了，但是一刷新就又不更新了

Question

功能是点击多选框，切换表格的表头数据，在页面中的data已经定义好了，三个不同的表头，
数据是更新了，就是试图更新的是不完整的，比如有10列数据，展示出来就只有5列，诡异的是，不刷新页面的时候，我只要在子组件的created中随便打印个什么，试图就更新正常，但是一刷新就又缺失了。
我已经试过了this.$set,不行。

<template>
<!--页面中的选择器-->
         <el-select v-model="sectionValue" placeholder="查看计划" @change="changeData" >
              <el-option
                v-for="item in dateSection"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
<!--表格-->
        <table :columns="columnsData"
                   :columnsTable="columnsTier"
                   :table="dataSource">
        </table>
</template>
<script>
data(){
    return {
        columns:[
            {
                name:1,
                age:2,
            },
            {
                tierData:{
                   text:'多级表头',
                   content:[
                       { 
                           name:1,
                           age:2,
                       }
                   ] 
                }
                
                
            },
        ],
        mColumns:['结构和columns相同，就是少一个多级表头的对象'],
        yColumns:['结构和columns相同，就是少一个多级表头的对象'],
        sColumns:['结构和columns相同，就是少一个多级表头的对象'],
    }
},
 computed:{
      columnsData(){
        return this.columns.filter(function(v){
          if(v.text !== undefined){
            return v
          }
        })
      },
      columnsTier(){
        return this.columns.filter(function(v){
          if(v.tierData !== undefined){
            return v
          }
        })
      },
}
methods:{
      changeData(value){
        console.log(value);
        if(!value){
          alert(0);
          return;
        }
        else if(value === '当月计划'){
          alert(1)
          this.columns=this.mColumns
        }else if(value === '当季计划'){
          alert(2)
           this.columns=this.sColumns
        }else if(value === '当年计划'){
          alert(3)
          this.columns=this.yColumns
      },
}
</script>

子组件

子组件：
<template>
//部分视图代码不全，使用遍历的方式，将数据循环出来
<el-table-column v-for="(list,index) in columns"
              :key="list.text"
              :label="list.text"
              :prop="list.dataIndex">
          <template scope="scope">
              {{scope.row[list.dataIndex]}}
          </template>
 </el-table-column>
</template>
<script>
Props:{
    // 接收父组件数据
      columns: {
        type: Array,
        default: function () {
          return []
        }
      },
      columnsTable: {
        type: Array,
        default: function () {
          return []
        }
      },
}
created(){
      console.log(this.columns); //打印出来是新数据，单数不更新
      console.log(this.columnsTable);//打印出来是新数据，单数不更新
},
</script>

Answer 1

自问自答一下：这个原因处于element-ui的bug，具体的原因问百度，解决的方法就是:key='改成一个随机函数Math.random()'，就可以了

Answer 2

子组件中定义两个变量来存从父组件传过来的值，然后用watch监听columns、columnsTable这两个值，在watch中给子组件中的变量赋值，试一下

Answer 3

你 key 等于一个随机数，当随机数一样的时候还是不行
还不如 v-for="(v, i) in xxx" :key="i"

Answer 4

this.$nextTick(()=>{

this.$set(......)

})