Vue.js vuejs3 youtubeplugin YT 未定义控制台错误

When I detect a specific width via class binding to make a mobile responsive web and swap between templates using display:none, the console keeps giving me an error.
I'm having trouble using 2 YouTube templates. If you use only one YouTube, the error disappears.

错误类型:ReferenceError:未定义YT.YouTube.vue？6574:118:25

如果替换我使用的类绑定模板有问题，还有其他方法吗？

<template>
  <div class="container">
    <div
      class="youtube_container"
      :class="{'youtube_container on' : WidthActive}">
      <h3 class="youtube_title">
        desktop video
      </h3>
    <!-- add -->
    <component 
       is="script" 
       id="youtube-iframe-js-api-script"
       src="https://www.youtube.com/iframe_api"
       />
      <YouTube
        src="https://youtu.be/GQmO52f26Ws"
        width="540" 
        height="360" />
    </div>
    <div
      class="youtube_container_mobile"
      :class="{'youtube_container_mobile on' : WidthmobileActive}">
      <h3 class="youtube_title">
        mobile video
      </h3>
      <YouTube
        src="https://youtu.be/GQmO52f26Ws"
        width="280" 
        height="300" 
        class="youtube_padding" />
    </div>
  </div>
</template>

<script setup>
import YouTube from 'vue3-youtube'
import { ref } from 'vue'

const WidthActive = ref(true)
const WidthPostion  = ref(0)
//mobile
const WidthmobileActive = ref(false)
const WidthmobilePostion  = ref(0)

window.addEventListener('resize', () => {
  WidthmobileActive.value = WidthmobilePostion.value > 590
  WidthmobilePostion.value = window.innerWidth
})
 window.addEventListener('resize', () => {
    WidthActive.value = WidthPostion.value < 591
    WidthPostion.value = window.innerWidth
})
</script>

<style>
.youtube_container{
  display: grid;
}
.youtube_container.on{
  display: none;
}
.youtube_container_mobile{
  display: grid;
}
.youtube_container_mobile.on{
  display: none;
}
</style>