Can't trigger beforeDraw with Vue-Chartjs (or any other plugins) - vue.js

Question

I'm trying to add custom text to the Chartjs chart (using vue-chartjs), what I've found out so far is that I need to do this via beforeDraw (or similar) plugin. I included the plugin in the options.plugins, but it doesn't get triggered.
What am I doing wrong? Here's the code
<script>
import {Scatter} from "vue-chartjs";
export default {
extends: Scatter,
props: {
chartdata: {
type: Object,
default: null
},
options: {
type: Object,
default: null
}
},
mounted () {
this.renderChart(this.chartdata, {
scales: {
xAxes: [{
ticks: {
max: 100,
min: -100
},
type: 'linear',
}],
yAxes: [{
display: true,
type: 'linear',
ticks: {
max: 100,
min: -100
}
}]
},
elements: {
point: {
pointStyle: 'circle',
radius: 16,
backgroundColor: "#dc005a"
}
},
layout: {
padding: {
left: 25,
right: 25,
top: 25,
bottom: 25
}
},
plugins: [{
id: "AddLegend",
beforeDraw(chart) {
console.log(chart)
},
}],
});
}
}
</script>

Answer 1

Plugins can optionally be registered globally through Chart.plugins.register. You can register any of the hooks provided by the Plugin Core API and provide your custom code. The afterDraw hook for example would have to be registered as follows:
Chart.plugins.register({
afterDraw: chart => {
// your code
}
});

Answer 2

mounted () {
this.addPlugin({
id: 'my-plugin',
afterDraw: function (chart) {
var ctx = chart.ctx;
ctx.font = "bold 20px FiraGO";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("ლიბერალური", chart.width/2, chart.height - 25);
ctx.font = "bold 20px FiraGO";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("ავტორიტარული", chart.width/2, 25);
ctx.font = "bold 20px FiraGO";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.rotate(Math.PI/2);
ctx.fillText("გეგმიური ეკონომიკა", chart.width/(-2), 25);
// ctx.save();
ctx.fillText("თავისუფალი ეკონომიკა", chart.width/(-2), chart.height - 25);
// ctx.save();
// ctx.rotate(Math.PI/(-2))
// ctx.save();
}
});
this.renderChart(this.chartdata, {
scales: {
xAxes: [{
ticks: {
max: 100,
min: -100
},
type: 'linear',
}],
yAxes: [{
display: true,
type: 'linear',
ticks: {
max: 100,
min: -100
}
}]
},
elements: {
point: {
pointStyle: 'circle',
radius: 16,
backgroundColor: "#dc005a"
}
},
layout: {
padding: {
left: 50,
right: 50,
top: 50,
bottom: 50
}
},
});
}