change VueJS component data value from inside Highchart event - vue.js

Question

I'm using vue2-highcharts to build a pie chart. In my component, which contains the HighCharts chart, there is a Boolean variable named showOverlay. I'm trying to change the showOverlay value when a HighCharts click event occurs.
The component code is:
<template>
<section class="charts">
<vue-highcharts :options="pieOptions" ref="pieChart"></vue-highcharts>
</section>
</template>
<script>
/* eslint-disable */
import VueHighcharts from 'vue2-highcharts'
export default {
components: {
VueHighcharts
},
props: ['score', 'show'],
data() {
return {
showOverlay: false,
pieOptions:
{
chart: {
type: "pie",
options3d: {
enabled: false,
alpha: 45
}
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
},
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
// ----- HERE I WANT TO SET showOverlay -----
// ----- for example: this.showOverlay = false -----
alert('Category: ' + this.name + ', value: ' + this.y);
}
}
}
}
},
series: [
{
name: "Platform Score",
data: [
["Spotify", 3],
["Deezer", 1]
]
}
]
}
}
},
methods: {
}
}
</script>
As you can see, I marked in the code where I want to change the showOverlay value, but this holds the HighCharts instance at that line, and I can't figure out how to access the Vue instance to change the showOverlay value.
Worth mentioning: the final goal is to $emit the change to the parent component. I found a relevant suggestion in another post, moving the data setup into the mounted hook and using an arrow-function:
mounted () {
const that = this;
Highcharts.mapChart(this.$el, {
series: [{
events: {
click: () => {
that.$emit('somethingHappened', 'someData');
}
}
}]
})
}
but when I tried it with a bit of modification:
mounted () {
const that = this;
this.$refs.pieChart.chart(this.$el, {
series: [{
events: {
click: () => {
that.$emit('somethingHappened', 'someData')
}
}
}]
})
},
I got the following error:
this.$refs.pieChart.chart is not a function
How can I tackle this?

Answer 1

Inside your component's data, changing pieOptions.plotOptions.series.point.events.click to an arrow-function would provide the Vue instance as this inside the handler. The HighCharts series point (previously this in your click-handler) is stored in the event argument as point, so your pieOptions Vue data should look something like this:
click: ({point}) => {
this.showOverlay = false;
alert('Category: ' + point.name + ', value: ' + point.y);
this.$emit('somethingHappened', 'someData');
}
demo