is it possible to append vue 3 component after the html body in google chrome extension

Question

I am developing a google chrome extension v3, now I want to append a Vue 3 component after the original web page body. First, I am tried to capture the user selection event in the content script index like this:

document.addEventListener(MOUSE_UP, firstMouseUp);

the next step, I want to insert a popup component into the original web page that I could show to user some custom content. what I am tried to do like this right now:

import TranslatorPop from '@/public/widget/translator/TranslatorPop.vue';

const selection = getSelection();

export async function firstMouseUp(e: MouseEvent){
    if(selection && selection.toString().trim().length>0){
                document.querySelector('body')?.appendChild(TranslatorPop.$el)
    }
}

I want to append the vue 3 component content after the original web html page body element. Seems did not work as expect.Show the error like this:

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

what should I do to append the Vue 3 component to the original web page? is it possible? or any better way to do this? And this is the vue 3 component define:

<template>
    <div>I am a pop</div>
</template>

<script>
import { defineComponent } from "vue"

export default defineComponent({
    setup() {
        
    },
})
</script>

<style scoped>


</style>

I have tried to define element like this and append the element:

var z = document.createElement('p');
z.innerHTML = 'test satu dua tiga';

it works. seems the vue 3 TranslatorPop.$el not right.

Tried 1: I tried to new the component like this:

let instance = new TranslatorPop()
document.querySelector('body')?.appendChild(instance.$el)

still did not work.

Tried 2: I also tried like this:

const app = createApp(TranslatorPop);
app.use(store);
app.mount("#app");
document.querySelector('body')?.appendChild(app.$el)

but the compiler shows error like this:

  TS2339: Property '$el' does not exist on type 'App<Element>'.

Tried 3: I also tried like this:

const app = createApp(TranslatorPop);
        app.use(store);
        let vm = app.mount("#app");
        document.querySelector('body')?.appendChild(vm.$el)

this compile success, but shows error like this when run the app:

content.js:17410 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$el')
    at HTMLDocument.firstMouseUp (content.js:17410:56)

tried 4: I tried to use ref to get the dom:

<template>
    <div id="app" ref="app">I am a pop</div>
</template>

const app = createApp(TranslatorPop);
        app.use(store);
        let vm = app.mount("#app");
        document.querySelector('body')?.appendChild(vm.$refs.app)

seems did not work.