el-table 改数据源的值但是不刷新

问题：公司项目中使用Vue+elementUI，在使用axios加载数据的时候发现el-table里的数据没有刷新出来

页面代码：

                     <!--绑定数据源-->
                    <el-table
                            :data="form.goods"
                            style="width: 100%"
                            max-height="250">
                        <el-table-column
                                prop="goods.id"
                                label="货品ID"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goods.goodsNo"
                                label="货品编码"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goods.goodsName"
                                label="货品名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goods.goodsSpec"
                                label="货品规格"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goodsCount"
                                label="数量"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="120">
                            <template slot-scope="scope">
                                <el-button
                                        @click.native.prevent="deleteRow(scope.$index, form.goods)"
                                        type="text"
                                        size="small">
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

数据定义：

data() {
            return {
                isSubmiting: false,
                isNew: true,
                isSynced: false,
                pageTitle: "",
                singlePacket: '',
                good: {
                    goods: {goodsNo: '', goodsSpec: '', goodsName: '', id: ''},
                    goodsCount: ''
                },
                form: {
                    billNo: '',
                    department: {
                        departmentCode: ''
                    },
                    goods: []//默认这里的数据是空的
                },
            }
        },

axios在created()里加载数据

created() {
            if (this.$route.params.returnTask) {
                this.form = this.$route.params.returnTask;
                Remote.getSurgeryTaskItems(this.form.id).then((res) => {
                    let status = res.data.status; 
                    if (status === 0) {
                        //在这里把后台返回的值给table的数据源，但是此时table没有刷新，打印输出this.form.goods是有值且正确的
                        this.form.goods = res.data.data;
                    } else {
                        this.$message.error("获取详细货品列表失败!");
                    }
                }).catch((error) => {
                    // this.form.goods.goodsNo=value;
                })
            } 
        }

解决过程

在搜索引擎看到很多人遇到相同的情况，有说用$set方法的，但是对于我这个案例不适用。也有说设置el-table的key=Math.random()，但是也无效。
如

                     <!--绑定数据源-->
                     <!--:key="Math.random()"也无效-->
                    <el-table
                            :data="form.goods"
                            :key="Math.random()"
                            style="width: 100%"
                            max-height="250">
                        <el-table-column
                                prop="goods.id"
                                label="货品ID"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goods.goodsNo"
                                label="货品编码"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goods.goodsName"
                                label="货品名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goods.goodsSpec"
                                label="货品规格"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goodsCount"
                                label="数量"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="120">
                            <template slot-scope="scope">
                                <el-button
                                        @click.native.prevent="deleteRow(scope.$index, form.goods)"
                                        type="text"
                                        size="small">
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

之后我思考key的值在axios之后再赋值为随机值就行了，所以

解决

在table上的key绑定一个临时变量，然后在axio的回调赋值后再更新这个变量的值。

                     <!--绑定数据源-->
                    <el-table
                            :data="form.goods"
                            :key="itemkey"
                            style="width: 100%"
                            max-height="250">
                        <el-table-column
                                prop="goods.id"
                                label="货品ID"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goods.goodsNo"
                                label="货品编码"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goods.goodsName"
                                label="货品名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goods.goodsSpec"
                                label="货品规格"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="goodsCount"
                                label="数量"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="120">
                            <template slot-scope="scope">
                                <el-button
                                        @click.native.prevent="deleteRow(scope.$index, form.goods)"
                                        type="text"
                                        size="small">
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

数据定义：

data() {
            return {
                isSubmiting: false,
                isNew: true,
                isSynced: false,
                pageTitle: "",
                singlePacket: '',
                good: {
                    goods: {goodsNo: '', goodsSpec: '', goodsName: '', id: ''},
                    goodsCount: ''
                },
                form: {
                    billNo: '',
                    department: {
                        departmentCode: ''
                    },
                    goods: []
                },
                itemkey: ''//临时变量
            }
        },

逻辑代码

 created() {
            if (this.$route.params.returnTask) {
                this.form = this.$route.params.returnTask;
                this.isNew = false;
                this.isSynced = this.form.sent;
                Remote.getSurgeryTaskItems(this.form.id).then((res) => {
                    let status = res.data.status;
                    if (status === 0) {
                        this.form.goods = res.data.data;
                        this.itemkey = Math.random();//在这边给key赋随机值
                    } else {
                        this.$message.error("获取详细货品列表失败!");
                    }
                }).catch((error) => {
                    // this.form.goods.goodsNo=value;
                })
            }

参考链接：
https://segmentfault.com/q/1010000012001863