Vue 3 and Chartjs showing createElement not a function error

I have a Dashboard.vue file

<template>
  <div>
    <h3>Bar Chart Example in Vue</h3>
    <bar-chart></bar-chart>
  </div>
</template>

<script>
import BarChart from '@/components/BarChart'

export default {
    name: "Dashboard",
    data() {
            return {
                
            }
        },
    components: {
        BarChart
    }
}
</script>

and the BarChart.vue file which are basically taken from chartjs example

<script>
import { Bar } from 'vue-chartjs'

  export default {
    extends: Bar,
    data() {
      return {
        chartData: {
          labels: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09",
            "2015-10", "2015-11", "2015-12"
          ],
          datasets: [{
            label: 'Bar Chart',
            borderWidth: 1,
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)',
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255,99,132,1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255,99,132,1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            pointBorderColor: '#2554FF',
            data: [12, 19, 3, 5, 2, 3, 20, 3, 5, 6, 2, 1]
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: true
              }
            }],
            xAxes: [{
              gridLines: {
                display: false
              }
            }]
          },
          legend: {
            display: true
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    },
    mounted() {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>

While these should just work out of the box, I am getting this error

[Vue warn]: Unhandled error during execution of render function at at <Dashboard onVnodeMounted=fn onVnodeUnmounted=fn ref=Ref< undefined > > at at

and another long list of error

Uncaught (in promise) TypeError: createElement is not a function
at Proxy.render (BaseCharts.js?86fc:8).....

the charts seems to be loading fine (package.json)

"dependencies": {
  "axios": "^0.20.0",
  "bootstrap": "^4.5.2",
  "bootstrap-vue": "^2.16.0",
  "chart.js": "^2.9.3",
  "core-js": "^3.6.5",
  "vue": "^3.0.0-rc.9",
  "vue-chartjs": "^3.5.1",
  "vue-router": "^4.0.0-0",
  "vuex": "^4.0.0-0"
},

I am using vue 3 and while installing chartjs I am getting this warning as well:

npm WARN portal-vue@2.1.7 requires a peer of vue@^2.5.18 but none is installed. You must install peer dependencies yourself.

I am not sure why its not working. It was working with Vue 2 in my earlier test. Trying to upgrade and this error. Any help would be appreciated. Thanks.