Unable to render portal when register portal target using Statamic.$components.append method

[videni]

I registered a portal target this way,

Statamic.booted(() => {
    Statamic.$components.append('poi-marker-overlay-portal', {
        props: {},
        template: `
            <portal-target name="poi-marker-overlay-portal">
            </portal-target>
        `
    });
})

then render a portal below in my field type to the target

<template>
    <v-portal to="poi-marker-overlay-portal">
        <div class="poi-marker-overlay" ref="overlay" :style="overlayPosition">
            <span class="poi-marker" v-for="(m, index) in markers"
                :key="index"
                :style="{top: m.top * overlayPosition.height, left: m.lef * overlayPosition.width}"
            >{{index}} </span>
        </div>
    </v-portal>
</template>

somehow, it just doesn't work, unless I copy the portal target to the layout.blade.php

this is quite confusing, anybody got the same issue please?