Chart can't be populated from data component [vue-highcharts wrapper] - vue.js

Question

I'm starting with the Higcharts wrapper for vue. Currently I'm migrating the code of a stockchart that I was using outside vue without problems into the wrapper. Everything is going well except that I can't populate the chart from component data or computed variables. Only from hard-written array or from component props.
This is the code:
<template>
<highcharts
class="stock"
v-bind:constructor-type="'stockChart'"
v-bind:options="config"
v-bind:deepCopyOnUpdate="false"
></highcharts>
</template>
<script>
export default {
name: "stockChart",
props: {
options: {
type: Object,
required: true
}
},
data: function() {
return {
config: {
series: [{
name: this.options.title,
//data: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]] //THIS WORKS!
//data: this.options.plotData //THIS ALSO WORKS!!
data: this.plotData //THIS DOESN'T...
}],
(...)
},
plotData: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]]
}
},
computed: {
// THIS ALSO ISN'T WORKING... THAT IS HOW I WANT IT TO WORK
/*plotData: function(){
return this.options.xData.map((e,i) => [e, this.options.yData[i]]);
}*/
}
}
</script>
<style scoped>
.stock {
width: 70%;
margin: 0 auto
}
</style>
I don't understand anything. The three methods should be equivalent. Why I can load data from props but not from data or computed? I can't find any good documentation about the vue wrapper to understand why is this happening.
Thanks for your help,
H25E

Answer 1

The answer is very simple. The reason is that the Vue defines all component data only after returning a whole data object, so you should not use this keyword to refer other component data within data definition. In order to make it work correctly, you should keep the plotData within component's data, but move the config into the computed properties. Take a look on the code below:
props: {
options: {
type: Object,
required: true
}
},
data: function() {
return {
plotData: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]]
}
},
computed: {
config: function() {
return {
series: [{
name: this.options.title,
data: this.plotData
}]
}
},
}