Highcharts-Vue wait for data then update series - vue.js

Question

There seems to be a few examples of how to do something similar, but all slightly different from my case. I am loading some stock data from an API (in a JS file) and then using it in my VUE. I would like to update my chart series with a new array compiles from the API data, but it's not working and I am not getting any errors.
My Vue looks like this:
<template>
<div>
<highcharts :options="chartOptions" :updateArgs="[true, false]" ref="highcharts"></highcharts>
</div>
</template>
<script>
import appService from '../stock_prices'
import {Chart} from 'highcharts-vue'
export default {
name: 'stocks',
props: {
msg: String
},
data () {
return {
chartOptions: {
mySeries: [],
info: {},
updateArgs: [true, true, true],
series: [{
data: [1,2,3,4,5,6,7]
}],
}
},
}
}, //data
components: {
highcharts: Chart
},
methods: {
updateSeries() {
for (var i = 0; i < this.info.stock_prices.length; i++) {
this.mySeries.push([this.info.stock_prices[i].volume]);
i++
}
data: this.mySeries
}
}, //methods
async created () {
this.info = await appService.getPosts();
this.updateSeries()
}, //async created
} //export default
I would like to obviously wait for all my data from my API (in the appService component) to load and then use it to create the updated series, but I am not sure that is actually what is happening.
Perhaps an important note: If I replace data: this.mySeries in my method with something like data: [10,10,10,10,10,10] it is still unsuccessful - no errors and the series is not being updated.
Thanks!

Answer 1

Notice, that your data doesn't contain chartOptions. Also, in updateSeries() you are updating data which refers to nothing. It should be something like the example below:
<template>
<div>
<highcharts :options="chartOptions" :updateArgs="[true, false]" ref="highcharts"></highcharts>
</div>
</template>
<script>
import appService from '../stock_prices'
import {Chart} from 'highcharts-vue'
export default {
name: 'stocks',
props: {
msg: String
},
data () {
return {
mySeries: [],
info: {},
updateArgs: [true, true, true],
chartOptions: {
series: [{
data: [1,2,3,4,5,6,7]
}]
}
}
}, //data
components: {
highcharts: Chart
},
methods: {
updateSeries() {
for (var i = 0; i < this.info.stock_prices.length; i++) {
this.mySeries.push([this.info.stock_prices[i].volume]);
}
this.chartOptions.series[0].data: this.mySeries;
}
}, //methods
async created () {
this.info = await appService.getPosts();
this.updateSeries()
}, //async created
} //export default
Check this example:
https://codesandbox.io/s/nw750l07nj