vue數(shù)據(jù)更新了，視圖沒(méi)有更新，但是在不刷新頁(yè)面的情況下子組件中調(diào)用created,視圖就更新了，但是一刷新就又不更新了

功能是點(diǎn)擊多選框，切換表格的表頭數(shù)據(jù)，在頁(yè)面中的data已經(jīng)定義好了，三個(gè)不同的表頭，
數(shù)據(jù)是更新了，就是試圖更新的是不完整的，比如有10列數(shù)據(jù)，展示出來(lái)就只有5列，詭異的是，不刷新頁(yè)面的時(shí)候，我只要在子組件的created中隨便打印個(gè)什么，試圖就更新正常，但是一刷新就又缺失了。
我已經(jīng)試過(guò)了this.$set,不行。

<template>
<!--頁(yè)面中的選擇器-->
         <el-select v-model="sectionValue" placeholder="查看計(jì)劃" @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:'多級(jí)表頭',
                   content:[
                       { 
                           name:1,
                           age:2,
                       }
                   ] 
                }
                
                
            },
        ],
        mColumns:['結(jié)構(gòu)和columns相同，就是少一個(gè)多級(jí)表頭的對(duì)象'],
        yColumns:['結(jié)構(gòu)和columns相同，就是少一個(gè)多級(jí)表頭的對(duì)象'],
        sColumns:['結(jié)構(gòu)和columns相同，就是少一個(gè)多級(jí)表頭的對(duì)象'],
    }
},
 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 === '當(dāng)月計(jì)劃'){
          alert(1)
          this.columns=this.mColumns
        }else if(value === '當(dāng)季計(jì)劃'){
          alert(2)
           this.columns=this.sColumns
        }else if(value === '當(dāng)年計(jì)劃'){
          alert(3)
          this.columns=this.yColumns
      },
}
</script>

子組件

子組件：
<template>
//部分視圖代碼不全，使用遍歷的方式，將數(shù)據(jù)循環(huán)出來(lái)
<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:{
    // 接收父組件數(shù)據(jù)
      columns: {
        type: Array,
        default: function () {
          return []
        }
      },
      columnsTable: {
        type: Array,
        default: function () {
          return []
        }
      },
}
created(){
      console.log(this.columns); //打印出來(lái)是新數(shù)據(jù)，單數(shù)不更新
      console.log(this.columnsTable);//打印出來(lái)是新數(shù)據(jù)，單數(shù)不更新
},
</script>