My problem: I followed the doc from vue-chartjs but the chart is not rendering the data.

Here is my code:

My component Chart.vue

<script>
import { Line } from 'vue3-chart-v2'

export default {
  extends: Line,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}
</script>

My Home.vue code:

<template>
  <div class="container">
    <line-chart
      v-if="loaded"
      :chartdata="chartdata"
      :options="options"/>
  </div>
</template>

<script>
import LineChart from '../components/Chart.vue'

export default {
  name: 'LineChartContainer',
  components: { LineChart },
  data: () => ({
    loaded: false,
    chartdata: null,
    options: {
      responsive: true,
    }
  }),
  async mounted () {
    this.loaded = false
    try {
      const quotes = [
        1, 2, 3, 4,
      ]
      this.chartdata = quotes
      this.loaded = true
    } catch (e) {
      console.error(e)
    }
  }
}
</script>

When I'm rendering the Home view, I see the axis of the chart, but no data inside... In the console, I don't have any errors.

Later, I would like to fetch data from an API. Thus, the quotes would receive data from an external API. Here I just put some fake data for testing.

Does anyone can help me ? Thks