How to dynamically update data in chart.js - vue.js

Question

How to update the data to the chart that I define when I mount?
I think that I fail to properly reference the chart?
It is the data() function that fails, with "Could not find linechart", but how do I specify linechart?
I have made
this code sandbox
<template>
<div class="container center">
<div class="px-3">
<label for="Product">Select a:</label>
<select
class="border-solid border-2 rounded-md p-1 font-bold"
v-on:input="outputData()"
id="Product"
aria-placeholder="Product"
>
<option value="" disabled selected>Product</option>
<option>1</option>
</select>
</div>
<div>
<canvas id="line-chart"></canvas>
</div>
</div>
</template>
<script>
import Chart from "chart.js/auto";
export default {
name: "line-plot",
mounted() {
const ctx = document.getElementById("line-chart");
const linechart = new Chart(ctx, this.chartData);
return linechart;
},
data() {
return {
chartData: {
type: "line",
data: {
labels: ["a", "b", "c"],
datasets: [
{
label: "Contract",
data: [5, 5, 5],
borderColor: "#9B202A",
borderWidth: 3,
},
{
label: "FWD",
data: [5, 10, 15],
borderColor: "#6F6F6F",
borderWidth: 3,
},
],
},
},
options: [],
};
},
methods: {
outputData() {
const contractPrice = {
label: "Contract",
data: [6, 6, 6],
borderColor: "#9B202A",
borderWidth: 3,
};
const fwdPrice = {
label: "FWD",
data: [10, 10, 10],
borderColor: "#6F6F6F",
borderWidth: 3,
};
const labels = ["a", "b", "c"];
this.chartData.data.labels = labels;
this.chartData.data.datasets[0] = contractPrice;
this.chartData.data.datasets[1] = fwdPrice;
linechart.update();
},
},
};
</script>
<style>
.center {
margin: auto;
}
</style>

Answer 1

You should define your variable to hold the Chart outside the mounted function in order to be visible to the other methods.
So instead use this
let linechart;
export default {
name: "line-plot",
mounted() {
const ctx = document.getElementById("line-chart");
linechart = new Chart(ctx, this.chartData);
},
sandbox