LineChart. Chart options are not applying.

[Igor]

Hello. I can't figure out what I'm doing wrong.
I was using vue-chartjs and everything was great, now I'm migrating to your vue-chart-3.
I have component of specific linear-chart (I have 3 different linear charts in my project) and component of general linear-chart, I'm passing chartData and options and merging them together.

SpecificLinearChart.vue

<template>
    <GeneralLinearChart
      :chart-data="chartData"
    />
 </template>
<script>
...
computed: {
    chartData() {
      const { chartPoints, labels } = this.getTrainings.reduce(
        (allDays, dayOfPeriod) => {
          const { month, value } = dayOfPeriod;

          allDays.chartPoints.push(value);
          allDays.labels.push(`${month}:${value}`);

          return allDays;
        },
        {
          chartPoints: [],
          labels: []
        }
      );

      return {
        datasets: [
          {
            borderColor: '#E2E2E2',
            borderCapStyle: 'round',
            borderWidth: 1,
            data: chartPoints,
            label: '',
            pointHoverRadius: '0',
            pointRadius: '0'
          }
        ],
        labels
      };
    },
}
...
</script>

GeneralLinearChart.vue

<template>
    <LineChart
      style="height: 310px;"
      v-bind="lineChartProps"
    />
</template>

<script>
import { LineChart, useLineChart } from 'vue-chart-3';
import {
  ref,
  toRefs,
  computed,
  defineComponent
} from '@vue/composition-api';

export default defineComponent({
  components: { LineChart },
  props: {
    chartData: {
      type: Object,
      default: () => ({})
    },
    customChartOptions: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const { customChartOptions, chartData } = toRefs(props);
    const defaultChartOptions = ref({
       maintainAspectRatio: false,
      scales: {
        y: {
          axis: 'y',
          grid: {
            display: false
          },
          ticks: {
            callback(tick) {
              if (tick === 0) {
                return '';
              }

              return tick;
            },
            font: {
              family: 'Montserrat',
              size: 12,
              weight: 'bold'
            },
            color: '#1C1C1C',
            min: 0,
            max: 100,
            stepSize: 20
          }
        },
        x: {
          axis: 'x',
          grid: {
            display: false
          },
          ticks: {
            color: '#1C1C1C',
            font: {
              family: 'Montserrat',
              size: 12,
              weight: 'bold'
            },
            callback(label) {
              const monthNames = [
                'Янв',
                'Фев',
                'Мар',
                'Апр',
                'Май',
                'Июн',
                'Июл',
                'Авг',
                'Сен',
                'Окт',
                'Ноя',
                'Дек'
              ];
              const [date, value] = label.toString().split(':');
              const matchedMonth = date.match(/\d{1,2}(?=.\d{4})/);

              if (matchedMonth === null) {
                return '';
              }

              const monthNumber = parseInt(matchedMonth[0], 10) - 1;

              return `${monthNames[monthNumber]}: ${Math.floor(value) || 0}`;
            }
          }
        }
      }
    });
    const options = computed(() => {
      return {
        ...defaultChartOptions.value,
        ...customChartOptions.value
      };
    });

    const { lineChartProps, lineChartRef } = useLineChart({
      chartData,
      options
    });

    return {
      lineChartProps,
      lineChartRef
    };
  }
});

</script>

I can see through console.log that my datasets, which I'm passing to the 'useLineChart' are ok.
But there are no values in chart, it looks empty. In ticks callback I'm recieving only empty labels. It looks like my options are not applying.

chartData:

tick's callbacks:

chart:

[Igor]

The problem was in migrating from chartjs v2 to v3(breaking changes)