Cannot change vimeo source dynamically - error: Unknown player. Probably unloaded

[dataexcess]

Hello,

I want to switch the source of my vimeo embedd dynamically. However when I do that I get a continues stream of the following errors, blocking my site and not setting any source:

player.js:2 Uncaught (in promise) Error: Unknown player. Probably unloaded.
    at e (player.js:2:12623)
    at new Promise (<anonymous>)
    at Proxy.value (player.js:2:12601)
    at player.js:2:11775
    at new Promise (<anonymous>)
    at Proxy.value (player.js:2:11669)
    at Proxy.value (player.js:2:15030)
    at Proxy.ready2 (plyr.min.mjs:3:77754)
    at Proxy.setup (plyr.min.mjs:3:74303)
    at Proxy.setup (plyr.min.mjs:3:86581)

I am following the setting source comvention like so ...

<template>
    <ClientOnly>
        <vue-plyr ref="plyr" :options="{ hideControls: true, autoplay: true, muted: true, volume: 0 }">
            <div data-plyr-provider="vimeo" :data-plyr-embed-id="vimeoId"></div>
        </vue-plyr>
    </ClientOnly>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'

const props = defineProps<{
    vimeoId: number
}>()

const plyr = ref<null | any>(null)

watchEffect(() => {
    console.log(props.vimeoId)
    if (plyr.value.player !== undefined && plyr.value.player.ready ) {
        plyr.value.player.source = {
            type: 'video',
            sources: [
                {
                    src: props.vimeoId.toString(),
                    provider: 'vimeo',
                },
            ],
        }
    }
})
</script>

I know I can add a :key argument to my vue-plyr component instance, and in doing so I get the stream of errors 6-7 times but eventually they stop and the source changes because the component rerenders all-together, but I would really like to avoid re-rendering this component as it causes other issues for me. Why can I not simply use the API as it is intended to be used?

Thank you!