How do I embed A-Frame scene with videosphere and have it still be draggable within Vue?

A normal A-Frame scene allows you to drag the view around to look at anything you want to.

For example: Vanilla JS (works) https://superb-swamp-deal.glitch.me/

However, when embedding basically the same scene within Vue/Quasar app the scene is no longer draggable unless you move your mouse to the very bottom of the a-scene window.

Vue 3 / Quasar (Dragging issues) https://codesandbox.io/p/sandbox/mutable-river-pgu2b2?file=%2Fsrc%2Fpages%2FVideoTest2.vue

Note: You can tell if the drag is going to work because the mouse pointer will change to a hand.

// The attempted Quasar/Vue 3 version.

<template>
  <q-page class="q-pa-sm">
    <div class="text-h3">Test 2: Embedded</div>
    <div class="q-ma-xs">
      <q-btn @click="moveCamera(45)">⏪</q-btn>
      <q-btn @click="moveCamera(-45)">⏩</q-btn>
    </div>
    <a-scene embedded v-if="a_frame_script_loaded">
      <a-assets @loaded="a_frame_assets_ready = true">
        <video
          id="video"
          loop
          crossorigin="anonymous"
          playsinline
          webkit-playsinline
          src="https://bitmovin-a.akamaihd.net/content/playhouse-vr/progressive.mp4"
        ></video>
      </a-assets>
      <template v-if="a_frame_assets_ready">
        <a-videosphere rotation="0 -90 0" src="#video" play-on-click>
        </a-videosphere>

        <a-entity id="rig" position="0 0 -1.5">
          <a-camera>
            <a-entity
              position="0 0 -1.5"
              text="align:center;
                  width:6;
                  wrapCount:100;
                  color: white;
                  value: Click or tap to start video"
              hide-on-play="#video"
            >
            </a-entity>
          </a-camera>
        </a-entity>
      </template>
    </a-scene>
  </q-page>
</template>

It's a case of className clashing between A-Frame and Quasar: .fullscreen. To fix it:

• unscoped:

.fullscreen.embedded {
  top: initial;
  left: initial;
}

• scoped:

a-scene :deep(.fullscreen.embedded) {
  top: initial;
  left: initial;
})

See it working: https://codesandbox.io/p/sandbox/determined-bush-f0p5uu?file=%2Fsrc%2Fpages%2FVideoTest2.vue

Tip: Whenever having trouble getting pointer events working on an element, it's a good idea to right-click > Inspect Element. In most cases, you're interacting with a different element than expected.