我尝试使用chartjs-plugin-zoom来实现图表的缩放。使用下面的代码，我得到了一个this.$refs.myChart.resetZoom is not a function错误。我如何正确地获得对图表的引用，以便我可以调用resetZoom函数？

<template>
    <div>
        <button @click="resetGraph">Reset</button>
        <Bar
            id="myChart"
            ref="myChart"
            :options="chartOptions"
            :data="chartData"
        />
    </div>
</template>
  
<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import zoomPlugin from 'chartjs-plugin-zoom';

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, zoomPlugin)

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March' ],
        datasets: [ { data: [40, 20, 12] } ]
      },
      chartOptions: {
        responsive: true,
        indexAxis: 'y',
        plugins: {
          zoom: {
            zoom: {
              wheel: {
                enabled: true,
              },
              pinch: {
                enabled: true
              },
              mode: 'xy',
            }
          }
        }
      }
    }
  },
  methods: {
    resetGraph() {
      this.$refs.myChart.resetZoom()
    }
  }
}
</script>