Instantiate a Vue3 Component without mounting to DOM

Question

Say i create a Vue3 component like this

import { defineComponent } from "vue";

var instance = defineComponent({
  computed:{ 
    message() {
       return 'Hello world'
    }
  }
})

I can easily instantiate it by adding it to the DOM like this:

<component :is="instance"/>

But suppose i don't want to add it to the DOM, i just want to be able to use the reactive properties and VueJS component magic.

Is there a way to create an instance of the component and interact with it in javascript without using the <component> tag like so:

console.log(instance.message) //hoping to log 'Hello World'

In Vue 2 it was easy, in Vue 3 it's like pulling teeth trying to find an answer out there.

Answer 1

You can use a reactive object anywhere with the composition API.

Here is an example:

https://vueschool.io/articles/vuejs-tutorials/home-rolled-store-with-the-vue-js-composition-api/