vue中如何正确封装echarts组件？

最近在写自定义大屏的项目，页面所有的组件几乎都是关于echarts的图表。

1.常规思路

<script>
    mounted() {
        this.renderChart();
    },
    methods: {
        renderChart: function() {
            this.chart = echarts.init(document.getElementId('echart'));
            this.chart.setOption(opts)
        }
    },
    watch: {
        chartData: {
            handle(newVal,oldVal) {
                this.renderChart();
                //ECharts在每次setOption后都需要清理变量，
                //在ECharts中是有API手动清理变量的，分
                //别是clear()和dispose()，区别是前者只需插入参数，ECharts就会重绘图表；
                //而后者则是直接将ECharts对象进行清理，
                //需要重新构建ECharts对象。
                this.charts.dispose();
            },
            deep: true

        }
        
    }
</script>

2.利用计算属性

<script>
    mounted() {
        this.ren