Vlite player not showing when used in `onMounted` lifecycle hook in Vue

[ThatOneCalculator]

Describe the bug

Trying to use a basic player with PIP plugin shows TypeError: this.media is null in console

Steps to reproduce

new Vlitejs('#player', {
    plugins: ['pip'],
});

Full file: https://github.com/ThatOneCalculator/misskey/blob/55e389ba615c429349dd6e0a5dedb97028daca5b/packages/client/src/components/media-video.vue

Expected behavior

video plays

Screenshots and recordings

TypeError: this.media is null

Vlite.js

4.0.6

Browser

Firefox

OS

Linux

Additional context

https://stop.voring.me/notes/92ky9opshb

[syuilo]

use onMounted lifecycle hook

[ThatOneCalculator]

I did

import Vlitejs from 'vlitejs';
import VlitejsPip from 'vlitejs/dist/plugins/pip';
import { defaultStore } from '@/store';

const props = defineProps<{
    video: misskey.entities.DriveFile;
}>();

const videoEl = $ref<HTMLVideoElement | null>();

onMounted(() => {
    if (videoEl) {
        Vlitejs.registerPlugin('pip', VlitejsPip);
        new Vlitejs('#player', {
            plugins: ['pip'],
        });
    }
});

which fixes the error, but the video loads with the default player and not Vlitejs. Probably my fault still...