Looking to incorporate Vue into a non-Vue Class using the Composition API for a Chrome Extension project where having the entire thing as a Vue App doesn't make sense.
The Vue Instance is being instantiated in the usual manner and then injected into the Class.
// typescript
// content.ts
const vueFooInstance = app.mount(vueRoot) as unknown as FooMethodsInterface;
new BarClass(vueFooInstance);
// BarClass.ts
Class BarClass
{
constructor(vueFooInstance){
this.vueFooInstance = vueFooInstance
this.vueFooInstance.someMethodOnFoo(); // encountering an error here if using <script setup> :
// this.vueFooInstance.someMethodOnFoo() is not a function
}
}
The issue seems to be that Vue returns a Proxy Object which results in the method not being available when using the <script setup> approach.
However, switching back to the 'traditional' method resolves the problem:
export default defineComponent({
setup(){
someMethodOnFoo(){
}
}
return {
someMethodOnFoo,
}
}
Thus, the question arises:
How can the problem be resolved when utilizing the <script setup> method or is it not feasible? (It would also be helpful to understand why the issue occurs with
<script setup lang="ts">(The suspicion is that it might involve a typescript issue with defineExpose, but it's not confirmed).