title: Update Highcarts series data form axios request in VueJS
body: <p>I'm trying to update the series data in my <code>Highchart</code>. I'm using the <code>highcharts-vue</code> component.</p>
  
  <p>Within my template I have:</p>
  
  <pre><code>&lt;highcharts :options="chartOptions"&gt;&lt;/highcharts&gt;
  </code></pre>
  
  <p>In the <code>data</code> of my <code>Vue</code> component I have:</p>
  
  <pre><code>data () {
      return {
          chartOptions: {
              chart: {
                  height: 300,
                  type: 'line'
              },
              title: {
                  text: 'Amount of visitors per day'
              },
              series: [{
                  name: 'Visitors',
                  data: [],
                  color: '#44B8D6'
              }]
          }
      }
  },
  </code></pre>
  
  <p>And my <code>Axios</code> request:</p>
  
  <pre><code>const vm = this;
  const request = 'get_visitors';
  this.$http({
      method:'get',
      url:'/api',
      params: {
          request: request
      },
      responseType:'json'
  })
  .then(function(response) {
      let setData = [];
      for (let i = 0; i &lt; response.data.length; i++) {
          setData.push(response.data[i].data)
      }
      setData = setData.map(Number);
      console.log(setData);
      vm.chartOptions.series.data = setData
  })
  .catch(function(error) {
      console.log(error)
  });
  </code></pre>
  
  <p>But the chart doesn't get updated. The <code>console.log(setData)</code> actually shows me the array, so the request goes OK.</p>
  
  <p>Any thoughts?</p>