How to create new component with @vue/composition-api in TS file?

Question

I have some components that I need to create in the TS file. Usually, I create by calling new Component because on our project we have vue-component-decorator but now I'm starting using @vue/composition-api and I can't call any component as new.

Working:

// SomeComponent.vue
import { Vue, Component } from 'vue-component-decorator';

@Component
export default SomeComponent extends Vue {}

// Any .ts file
const component = new SomeComponent();

Not working:

// SomeComponent.vue
import { defineComponent } from '@vue/composition-api';

export default defineComponent({});

// Any .ts file
const component = new SomeComponent();

Answer 1

You need to use createApp to create the component and mount it programmatically:

const myComponent = defineComponent({/* */})
createApp(myComponent, { /* Pass props here */ }).mount('#container');

Sources:

• github vuejs issue#629
• StackOverflow question #64251487