How to display data in stockChart?

Question

JavaScript

I'm trying to import stockChart into a component, as shown in the dock, but highchart does not see it
here is the Chart.js component itself

/* eslint-disable camelcase */
import Highcharts from 'highcharts';
import VRadio from '@/components/RadioButton';
import exportingInit from "highcharts/modules/exporting";
import stockInit from 'highcharts/modules/stock';
exportingInit(Highcharts);
stockInit(Highcharts);

/**
 * Table component
 *
 * @param {array} data array with data for table
 */
export default {
  name: 'Chart',
  props: {
    data: {
      type: Array,
    },
  },
  components: {
    VRadio,
    Highcharts,
  },
  data() {
    return {
      chartOptions: null,
      master: null,
      selected: null,
      variants: null,
      dates: null,
      datailChart: null,
    };
  },
  methods: {
    getNormalArr() {
      const user_count = this.data.map(task => task.user_count);
      const group_count = this.data.map(task => task.group_count);
      const reply_count = this.data.map(task => task.reply_count);
      const likes = this.data.map(task => task.likes);
      const reposts = this.data.map(task => task.reposts);
      const comments = this.data.map(task => task.comments);
      this.dates = this.data.map(task => task.date);
      const views = this.data.map(task => task.views);
      const budget = this.data.map((task) => {
        // eslint-disable-next-line radix
        if (task.budget !== null) return parseInt(task.budget);
        return 0;
      });

      this.variants = [{
        id: '1',
        type: 'area',
        checked: true,
        name: 'Посты от пользователей',
        data: this.getDatesArr(user_count),
        color: '#244363',
      }, {
        id: '2',
        type: 'area',
        name: 'Посты от пабликов',
        data: this.getDatesArr(group_count),
        color: '#388E3C',
      }, {
        id: '3',
        type: 'area',
        name: 'Отправили в коменты',
        data: this.getDatesArr(reply_count),
        color: '#1b8dbb',
      }, {
        id: '4',
        type: 'area',
        name: 'Лайки',
        data: this.getDatesArr(likes),
        color: '#ef5c0e',
      }, {
        id: '5',
        type: 'area',
        name: 'Репосты',
        data: this.getDatesArr(reposts),
        color: '#c9302c',
      }, {
        id: '6',
        type: 'area',
        name: 'Комменты',
        data: this.getDatesArr(comments),
        color: '#ffbb61',
      }, {
        id: '7',
        type: 'area',
        name: 'Охват',
        data: this.getDatesArr(views),
        color: '#d09652',
      }, {
        id: '8',
        type: 'area',
        name: 'Бюджет',
        data: this.getDatesArr(budget),
      }];
      const series = [{
        id: '1',
        type: 'area',
        checked: true,
        name: 'Посты от пользователей',
        data: this.getDatesArr(user_count),
        color: '#244363',
      }];
      this.show(series.sort((a, b) => b.data[0] - a.data[0]));
    },
    getDatesArr(arr) {
      const ret = [];
      this.dates.forEach((date, i) => ret.push([date, arr[i]]));

      return ret;
    },
    changeOption(newSeries) {
      const series = [];
      series.push(newSeries);
      this.show(series.sort((a, b) => b.data[0] - a.data[0]), series[0].data);
    },
    show(series, data) {
      this.chartOptions = {
        chart: {
          type: 'area',
          reflow: false,
          borderWidth: 0,
          backgroundColor: null,
          marginLeft: 50,
          marginRight: 20,
        },
        title: {
          text: null,
        },
        xAxis: {
          showLastTickLabel: true,
          type: 'datetime',
          maxZoom: 14 * 24 * 3600000,
          plotBands: [{
            color: 'rgba(0, 0, 0, 0.2)',
          }],
          title: {
            text: null,
          },
        },
        yAxis: {
          gridLineWidth: 0,
          labels: {
            enabled: false,
          },
          title: {
            text: null,
          },
        },
        tooltip: {
          formatter() {
            return false;
          },
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          series: {
            fillColor: {
              linearGradient: [0, 0, 0, 70],
              stops: [
                [0, Highcharts.getOptions().colors[0]],
                [1, 'rgba(255,255,255,0)'],
              ],
            },
            lineWidth: 1,
            marker: {
              enabled: false,
            },
            shadow: false,
            states: {
              hover: {
                lineWidth: 1,
              },
            },
            enableMouseTracking: false,
          },
        },

        series,

        exporting: {
          enabled: false,
        },

      };
    },
  },
  created() {
    this.getNormalArr();
  },
  watch: {
    data() {
      this.getNormalArr();
    },
  },
};

But there is an error in the console

Property or method "stockChart" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.