VueJs highstock не может правильно рисовать график

Это мой код VueJS, я использую эту библиотеку https://www.npmjs.com/package/highcharts-vue Поэтому я не знаю, как мне получить данные и установить их как серию до того, как будет нарисован график. Или, если это невозможно, как правильно перерисовать график? Теперь я устанавливаю некоторые данные по умолчанию, затем получаю данные со страницы и перерисовываю график, но когда все готово, и я вижу свой график, полоса прокрутки переходит в левую сторону и имеет очень небольшой диапазон. Итак, как установить параметры без изменения полосы прокрутки и селектора диапазона?

<template>
  <highcharts :constructor-type = "'stockChart'" :options = "options" :updateArgs = "[true, false]" ref = "linerchart"></highcharts>
</template>

<script>
    import {Chart} from 'highcharts-vue'
    import Highcharts from 'highcharts'
    import stockInit from 'highcharts/modules/stock'
    stockInit(Highcharts)
    export default {
      data: () => ({
        obj: [],
        names: ['CAFF'],
        options: {
          credits: { enabled: false },
          rangeSelector: {
            selected: 1,
            inputEnabled: false,
            buttonTheme: {
                visibility: 'visible'
            }
          },
          yAxis: {
            labels: {
                formatter: function () {
                    return (this.value > 0 ? ' + ' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
          },
          plotOptions: {
            series: {
              compare: 'percent',
              showCheckbox: false,
              events: {
                checkboxClick: function (event) {
                  if (event.checked) {
                      this.show();
                  } else {
                      this.hide();
                  }
                }
              }
            }
          },
          tooltip: {
            pointFormat: '<span style = "color:{series.color}">{series.name}</span>: <b>{point.y}</b> USD<br/>',
            split: true
          },
          series: [{
            name: "CAFF",
            data: [1,2,3,4,5,6]
          }]
        }
      }),
      methods: {
        linerGraph() {
          var that = this;
          this.names.forEach(function(name, i){
            axios.get('/test/account/CAFF')
            .then(response => {
              console.info(response.data)
              that.obj.push({name: name, data: response.data});
            });
          });
          this.options.series = that.obj
        },
      },
      components: {
        highcharts: Chart
      },
      mounted() {
        console.info(this.$refs.linerchart)
        this.linerGraph();
      }
    }
</script>