<template>
    <div ref="MyChart"></div>
</template>

              const MyChart = this.$refs.MyChart[0]
              if(MyChart) {
                MyChart.chart.on('datazoom', (e)=> {
                  const {start, end} = e.batch ? e.batch[0] : e
                  console.log(`start: ${start}, end: ${end}`)
                })
              }

<template>

    <v-chart 
    class="chart-box" 
    :options="polar"
     @click="handleClick" 
     @datazoom="handledatazoom"/>
</template>

<script>
export default {

      data() {
        return {
          polar: {
            dataZoom: [
              {
                type: 'inside',
                startValue: 0,
                endValue: 10
              },
              {
                startValue: 0,
                endValue: 10
              }
            ],
            xAxis: {},
            yAxis: {},
            series: []
          }
        }
      },

      created(){},
      mounted(){},
      methods:{
        handleClick(e) {
          const {name, value} = e
          console.log(`name: ${name}, value: ${value}`)
        },
        handledatazoom(e) {
          const {start, end} = e.batch ? e.batch[0] : e
          console.log(`start: ${start}, end: ${end}`)

            this.polar.dataZoom[0].start = start
            this.polar.dataZoom[0].end = end
            this.polar.dataZoom[1].start = start
            this.polar.dataZoom[1].end = end
        }
      }
}

</script>