Uncaught TypeError: Object(...) is not a function の解決について

前提

chart.jsを使用したいため、インストール後に表示させようとするもエラーが出てしまう。

vue-chart.jsのHPより参考して、vue-chart.jsをインストトールしている。

yarn add vue-chartjs chart.js@2.9.4

Index.vueから子Chart.vueを表示させる。
vue-chart.jsを利用したかったが、表示することができずタイトルのエラーが出てしまう。
エラーを解消してグラフを表示させたのですが、エラー解消できません。
どなたかご教授していただければと思います。

Index.vueにChart.vueを表示させる。
コンポーネント： Chart.vue

Chart.vue

<script> import { Bar } from 'vue-chartjs' export default { extends: Bar, data: () => ({ chartdata: { datacollection: { labels: ['January', 'February'], datasets: [ { label: 'Data One', backgroundColor: '#f87979', data: [40, 20] } ] } }, options: { responsive: true, maintainAspectRatio: false } }), mounted () { this.renderChart(this.datacollection, this.options) } } </script> <style> </style>

Index.vue

<template> <v-container> <Chart /> </v-container> </template> <script lang="ts"> import Vue from 'vue' import Chart from './Chart.vue' export default Vue.extend({ name: 'Index', components: { Chart }, data () { return { counter: 0, btnName: '追加', chartData: { labels: [], // データ詳細 datasets: [ { label: 'データ', data: [] } ] }, options: { }, addFlag: false } } }) </script> <style scoped> </style> import Vue from 'vue' import './plugins/axios' import App from './App.vue' Vue.config.productionTip = false new Vue({ router, store, vuetify, render: h => h(App) }).$mount('#app')