Как вывести данные в stockChart?

Question

[Ilya Vegner]

Пытаюсь импортировать stockChart в компонент, как это показано в доке, но highchart не видит его
вот сам компонент Chart.js

/* 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();
    },
  },
};

Но в консоли ошибка

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.