Vue-chartjs: `extends Vue<Bar>` causes typescript error

[slaweet]

Expected Behavior

Creating a typescript component with extends Vue<Bar> works as explained in the README:
https://github.com/apertureless/vue-chartjs/blob/develop/README.md#L121

Actual Behavior

Creating a typescript component that extends Vue<Bar>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Bar } from 'vue-chartjs';

@Component({
  extends: Bar,
})
export default class BarChart extends Vue<Bar> {
  @Prop({ required: true }) public chartData!: any;

  mounted (): void {
    this.renderChart(this.chartData, {});
  }
}
</script>

causes

ERROR in /home/slaweet/git/telltale-vue/src/components/Dashboard/BarChart.vue(5,1):
5:1 Unable to resolve signature of class decorator when called as an expression.
  Type 'VueClass<Vue>' is not assignable to type 'typeof BarChart'.
    Types of parameters 'options' and 'options' are incompatible.
      Type 'ThisTypedComponentOptionsWithArrayProps<Vue, Bar, object, object, never> | undefined' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, any, any, any, any> | undefined'.
        Type 'ThisTypedComponentOptionsWithArrayProps<Vue, Bar, object, object, never>' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, any, any, any, any> | undefined'.
          Type 'ThisTypedComponentOptionsWithArrayProps<Vue, Bar, object, object, never>' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, any, any, any, any>'.
            Type 'ThisTypedComponentOptionsWithArrayProps<Vue, Bar, object, object, never>' is not assignable to type 'ComponentOptions<Vue, any, any, any, any[], Record<any, any>>'.
              Types of property 'computed' are incompatible.
                Type 'object | undefined' is not assignable to type 'Accessors<any> | undefined'.
                  Type 'object' is not assignable to type 'Accessors<any> | undefined'.
                    Type 'object' is not assignable to type 'Accessors<any>'.
                      Index signature is missing in type '{}'.
    3 | import { Bar } from 'vue-chartjs';
    4 | 
  > 5 | @Component({
      | ^
    6 |   extends: Bar,
    7 | })
    8 | export default class BarChart extends Vue<Bar> {

Alternatively, I tried to use extends Vue

but that causes

ERROR in /home/slaweet/git/telltale-vue/src/components/Dashboard/BarChart.vue(12,10):
12:10 Property 'renderChart' does not exist on type 'BarChart'.
    10 | 
    11 |   mounted (): void {
  > 12 |     this.renderChart(this.chartData, {});
       |          ^
    13 |   }
    14 | }
    15 | </script>

Environment

• vue.js version: 2.6.12
• vue-chart.js version: 3.5.1
• chart.js version: 2.9.3
• npm version: 6.10.0
• vue-property-decorator version: 9.0.0

[Nicholaiii]

Locally I don't have any errors when using the vue-property-decorator export Mixins:

import { Component, Mixins, Prop } from 'vue-property-decorator'
import { Line, mixins } from 'vue-chartjs'
import { ChartOptions } from 'chart.js'
const { reactiveProp } = mixins

@Component({
  extends: Line
})
export default class LineChart extends Mixins(reactiveProp, Line) {
  @Prop() options!: ChartOptions

  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}