Vue中使用Highcharts封装了一个子组件，如何根据取得的后台数据去更新子组件。

Question

如下所示，子组件代码：

<template>
<div class="container">
    <div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
    props: {
        id: {
            type: String
        },
            //option 是图表的配置数据
        option: {
            type: Object
        }
    },
    mounted() {
        this.drawPage(this.id, this.option)
    },
    methods:{
        drawPage(id,option){
            HighCharts.chart(id,option);
        }
    },
    watch:{
        'id':function(newData,oldData){
            this.id=newData;
            console.log(newData,oldData);
        },
        'option':{
            handler(newValue,oldValue){
                console.log(newValue);
                console.log(oldValue);
                this.option=newValue;
                this.drawPage(this.id, this.option)
            },
            deep:false
        }
    }
}
</script>
<style scoped>
</style>

然后我在父组件中获取后台的数据，然后更新option 的值，但是发现无法渲染，这里写 deep：true 会导致页面特别卡，并且不停地监控这部分变化。
这里该怎么处理好呢。

Answer 1

            this.option=newValue;// 你这里直接改变了option。因为是不可以直接改变props的数据的。
            可以在mounted的时候先保存一下option到data里面。
            data(){
                return {
                    _option:null
                }
            }
            mounted(){
                this._option = this.option
            }
watch:{
    'id':function(newData,oldData){
        this.id=newData;
        console.log(newData,oldData);
    },
    '_option':{// 这里要watch 的是_option
        handler(newValue,oldValue){
            console.log(newValue);
            console.log(oldValue);
            this._option=newValue;// 这里要使用 的是_option
            this.drawPage(this.id, this._option)// 这里要使用 的是_option
        },
        deep:false
    }
}