How to use mixins in Vue 3

Question

I've been following this link https://www.telerik.com/blogs/real-time-data-visualization-using-vue-and-socket.io to create a real time line chart using vue.js and socket.io

My LineChart.js:

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
    
export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

The error I got:

Uncaught TypeError: vue_chartjs__WEBPACK_IMPORTED_MODULE_0__.mixins is undefined

and the webpage I got is completely blank. When I delete the mixins from my LineChart.js, the error I get becomes Uncaught TypeError: undefined has no properties instead.

So, I heard that it is because Vue3 does not support mixins but the tutorial is in Vue 2, how can I replace the mixins?

Answer 1

It's not the Vue 3, From vue-chartjs V4 version, Mixins have been removed .