fix: WIP HotFix onMounted not working as expected (nuxt/nuxt#13471) s…

…o trying a vanilla method to wait for element

components/twitch-streams/twitch-stream.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="`streamer-player-${props.streamer}`"></div>
+  <div :id="`streamer-player-${props.streamer}`" ref="test"></div>
 </template>
 
 <script lang="ts" setup>
@@ -10,6 +10,8 @@ const props = defineProps({
   },
 });
 
+const test = ref();
+
 const { load } = useScriptTag(
   'https://player.twitch.tv/js/embed/v1.js',
   () => {},
@@ -18,44 +20,27 @@ const { load } = useScriptTag(
   },
 );
 
-let isStreamLoaded = false;
-
-onBeforeMount(async () => {
-  await load();
-
-  const options = {
-    height: '100%',
-    width: '100%',
-    channel: props.streamer,
-    allowfullscreen: true,
-  };
-
-  /* global Twitch */
-  const player = new Twitch.Player(
-    `streamer-player-${props.streamer}`,
-    options,
-  );
-  player.setVolume(0.5);
-  isStreamLoaded = true;
-});
-
-if (!isStreamLoaded) {
-  await load();
-
-  const options = {
-    height: '100%',
-    width: '100%',
-    channel: props.streamer,
-    allowfullscreen: true,
-  };
-
-  /* global Twitch */
-  const player = new Twitch.Player(
-    `streamer-player-${props.streamer}`,
-    options,
-  );
-  player.setVolume(0.5);
-}
+const checkExist = setInterval(async () => {
+  if (document.getElementById(`streamer-player-${props.streamer}`)) {
+    await load();
+
+    const options = {
+      height: '100%',
+      width: '100%',
+      channel: props.streamer,
+      allowfullscreen: true,
+    };
+
+    /* global Twitch */
+    const player = new Twitch.Player(
+      `streamer-player-${props.streamer}`,
+      options,
+    );
+    player.setVolume(0.5);
+
+    clearInterval(checkExist);
+  }
+}, 100); // check every 100ms
 </script>
 
 <style scoped></style>