getting error "this.renderChart is not a function" or "TypeError: Object(...) is not a function" Chart.js Nuxt v2

i want to use chart.js in my nuxt project which is version ^2.15.7. The issue is that I having these errors in my console when trying to use this plugin in my .vue page.

errors:

this.renderChart is not a function

TypeError: Object(...) is not a function

here is my codes:

nuxt.config.js

 plugins: [
    {src: '~/plugins/chart.js', mode: 'client'},
  ],

/plugins/chart.js

import Vue from 'vue'
import { Line } from 'vue-chartjs'

Vue.component('line-chart', {
    extends: Line,
    props: ['data', 'options'],
    mounted () {
        this.renderChart(this.data, this.options)
    }
})

.vue page

  <template>
    <client-only>
        <line-chart :data="chartData"></line-chart>
    </client-only>
  </template>

  <script>
  export default {
    data() {
      return {
        chartData: {
          datasets: [{
            label: 'Title',
            data: [45, 55, 48, 35, 12]
          }]
        }
      };
    }
  }
  </script>

after many searches i finally found out nuxt v2 cant import and use "vue-chartjs" and instead of "vue-chartjs" we should use the "vue-chartjs/legacy", here is the solution:

installation

1-Run

npm i vue-chartjs

2-Then Run

npm i chart.js hchs-vue-charts

3-/plugins/chart.js

import Vue from "vue";
import { Line } from "vue-chartjs/legacy";
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement,
  PointElement,
} from "chart.js";

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  PointElement,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement,
);

Vue.component("line-chart", {
  extends: Line,
});

4-.vue page

  <template>
     <client-only placeholder="منتظر بمانید...">
      <line-chart
        :chart-options="options"
        :chart-data="chartData"
        :height="250"
        :width="350"
        chart-id="lineChart"
      />
    </client-only>
  </template>

  <script>
  chartData: {
      labels: ['sun','mon','tues'],
      datasets: [
        {
          label: 'Views',
          backgroundColor: ["tomato", "orange", "yellow"],

          data: ['0','2','5']
        }
      ]
    },
    options:{
      responsive: true,
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: 'views'
      },
      scales: {
        y: {
          suggestedMin: 0,
          ticks: {
            precision: 0
          }
        }
      }
    },
  </script>

5-nuxt.config.js (don't forget the mode:'client')

 plugins: [
    {src: '~/plugins/chart.js', mode: 'client'},
  ],