Hls.js integration with underlying video element not working

[FadhiliNjagi]

I'm having trouble integrating Hls.js with QMediaPlayer. I'm using Quasar v2 with webpack. When I do it with HTML video tag, it works:

<template>
  <q-page class="video-page">
    <div class="vp-container">
      <h5>Video test Page</h5>
      <video controls ref="mediaPlayer" class="vp-video" crossorigin="use-credentials">
      </video>
    </div>
  </q-page>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
import Hls from 'hls.js'

export default defineComponent({
  name: 'VideoPage',
  props: {
    url: {
      type: String,
      default: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
    }
  },
  setup (props) {
    const mediaPlayer = ref(null)
    let player = null

    onMounted(() => {
      if (Hls.isSupported()) {
        player = new Hls()
        player.loadSource(props.url)
        console.log('Loaded')
        // console.log(mediaPlayer.value)
        player.attachMedia(mediaPlayer.value)
        player.on(Hls.Events.MANIFEST_PARSED, () => {
          mediaPlayer.value.play()
        })
      }

    onBeforeUnmount(() => {
      if (player) {
        player.destroy()
      }
    })

    return {
      mediaPlayer, player
    }
  }
})
</script>

But when I try with QMediaPlayer it doesn't work

<template>
  <q-page class="video-page">
    <div class="vp-container">
      <h5>Video test Page</h5>
      <q-media-player ref="QMediaPlayer" class="vp-video" crossorigin="use-credentials">
      </q-media-player>
    </div>
  </q-page>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
import Hls from 'hls.js'

export default defineComponent({
  name: 'VideoPage',
  props: {
    url: {
      type: String,
      default: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
    }
  },
  setup (props) {
    const QMediaPlayer = ref(null)
    let player = null

    onMounted(() => {
      if (Hls.isSupported()) {
        player = new Hls()
        player.loadSource(props.url)
        console.log('Loaded')
        // console.log(QMediaPlayer.value.$media)
        player.attachMedia(QMediaPlayer.value.$media)
        player.on(Hls.Events.MANIFEST_PARSED, () => {
          QMediaPlayer.value.play()
        })
      }
    })

    onBeforeUnmount(() => {
      if (player) {
        player.destroy()
      }
    })

    return {
      player, QMediaPlayer
    }
  }
})
</script>