apex charts tooltip

tooltip is not working

HTML

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="app">
    <div id="container">
      <vue-apex-charts
        :type="chart.type"
        :height="chart.height"
        :options="chartOptions"
        :series="series">
      </vue-apex-charts>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

JavaScript

new Vue({
	el: "#app",
  
  data() {
    return {

      chart: {},        
      series: [],
      chartOptions: {}, 

    }
  },
  
  created(){
    this.loadChartData();
  },

  methods: {

    loadChartData(){

      this.chart = {
        type: "bar",
        height: 600,
      };

      this.series = [
        {
          name: "Valor",
          data: [5200, 4950, 3200, 2750, 2200, 1510],
        }
      ];

      this.chartOptions = {
        plotOptions: {
          bar: {
            horizontal: true,
            dataLabels: {
              position: "top",
            },
          },
        },

        dataLabels: {
          enabled: true,
          offsetX: -25,
          formatter: (val) => {
           return this.currencyValue(val)
          },
        },

        stroke: {
          show: true,
          width: 1,
          colors: ["#fff"],
        },

        tooltip: {
          shared: true,
          intersect: false,
        },

        xaxis: {
          categories: ['1', '2', '3', '4', '5', '6', '7'],
        },
        
      };   

    },

    currencyValue(value) {

      return 'R$' + value;
    },   
  },
  components: {
  	VueApexCharts
  }
})