Inheritance in Vue3 + Typescript Class Components

Question

I have a App.vue. I have a Component A in App.Vue. Now i also have a Base Class B and Class A should inherit properties from B. I am using Vue3 + Typescript in my project. When i am using simply extend class i am getting circular dependency so i tried mixins.

App.vue

<template>
  <div>App Works</div>
  <ObjA :msg= "messg" />
</template>

<script lang="ts">
import {Vue,Options} from 'vue-class-component';
import ObjA from './components/ObjA.vue'
@Options({
  components: {
    ObjA
  }
})
export default class App extends Vue{
      messg = "From App";
}
</script>

ObjA.vue

<template>
    <div>
        <p>From ObjA component</p>
        <button @click="toInherit()">Click button</button>
    </div>
</template>
<script lang="ts">
import ObjB from './ObjB.vue'
import {Options,mixins} from 'vue-class-component';
import {Prop} from 'vue-property-decorator';

@Options({
   
})
export default class ObjA extends mixins(ObjB){
    @Prop() msg!:string;
    mesg = this.msg;
    created(){
        console.log("ObjA created")
    }
    mounted(){
        console.log(this.msg)
        console.log(this.mesg)
        console.log(this.inherit)
    }
    
}
</script>

ObjB.vue

<template>
    <div>
        <p>From ObjB component</p>
    </div>
</template>
<script lang="ts">

import {Options , Vue} from 'vue-class-component'
@Options({
    
})
export default class ObjB  extends Vue{
    
    inherit = false ;
    created(){
        console.log("ObjB Created")
    }

    toInherit(){
        this.inherit = true;
        console.log("I am from ObjB")
    }
    
}
</script>

I am getting error message when using mixins to inherit from base.

Uncaught TypeError: Cannot read properties of undefined (reading ‘props’)
at normalizePropsOptions (runtime-core.esm-bundler.js?d2dd:3337:1)
at extendProps (runtime-core.esm-bundler.js?d2dd:3345:1)
at Array.forEach ()
at normalizePropsOptions (runtime-core.esm-bundler.js?d2dd:3357:1)
at extendProps (runtime-core.esm-bundler.js?d2dd:3345:1)
at Array.forEach ()
at normalizePropsOptions (runtime-core.esm-bundler.js?d2dd:3357:1)
at extendProps (runtime-core.esm-bundler.js?d2dd:3345:1)
at normalizePropsOptions (runtime-core.esm-bundler.js?d2dd:3354:1)
at createComponentInstance (runtime-core.esm-bundler.js?d2dd:6927:1).

If i use extend ObjB then getting this error message

Uncaught TypeError: Class constructor PowerBIReportEmbed cannot be invoked without ‘new’
at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:914:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5030:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:167:1)
at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5156:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:4939:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:4897:1)
at patch (runtime-core.esm-bundler.js?d2dd:4489:1)
at mountChildren (runtime-core.esm-bundler.js?d2dd:4685:1)
at mountElement (runtime-core.esm-bundler.js?d2dd:4594:1)
at processElement (runtime-core.esm-bundler.js?d2dd:4566:1)

Can anybody help me to solve me this problem. I have to inherit from base component in class component syntax plus typescript.