Часы не работают при обновлении данных диаграммы EChart в Vue

Я работаю с EChart и Vue 2, я сделал простой компонент EChart.

<template>
  <div :class = "className" :style = "{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Object,
      required: true
    },
    autoResize: {
        type: Boolean,
        default: true,
      },        
  },
  watch: {

    chartData: {
         deep: true,
         handler(val) {
          console.info('chartdata handler',val);

          this.setOptions(val.legend, val.data);
         }
    },
    width: {
         deep: true,
         handler(val) {
          console.info(' width',val);
        }
    }
  },  
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null;
    
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.setOptions(
         ['pepper','rice'],
         [
              { value: 0, name: 'pepper' },
              { value: 0, name: 'rice' },
        ]
      );
    },

    setOptions( lengend, data ) {    
      this.chart.setOption({
          title: {
              left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            data: lengend,
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              itemStyle: {
                borderRadius: [20, 5, 5, 10],
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false
              },
              data: data
            }
          ]
        });
    }
  }
}
</script>

Я использую этот компонент в другом родителе.

   <PieChart ref = "pieChart" :chartData = "pieData" :width = "'400px'"> </PieChart>

  data () {
    return {
        pieData: {
            name: 'crop distribution',
            data:[
                { value: 115, name: 'pepper' },
                { value: 128, name: 'rice' }
            ],
            legend:['pepper','rice']
        },
     }

Однако этот код никогда не передаст chartData в PieChart для обновления графика. Я посмотрел и нашел:

watch: {
    chartData: { deep: true,
         handler(val) {
          console.info('chartdata handler',val);
          this.setOptions(val.legend, val.data);
         }
    },
}

Эта функция просмотра не запущена, пока нет вывода на консоль. Часы хорошо работают в другом приложении Vue, но при интеграции с EChart здесь не работают.