JaasMeeting with roomName or room-name

[manonthemat]

I have a Meeting component that I tried to refactor with this SDK.

The issue I'm having is that the room-name attribute seems to render the room name in the UI (but does not pass the correct info to the underlying JitsiMeeting component for auth purposes), while the use of roomName renders the room name in the UI as Undefined but allows for access to the room (I'm not getting the "Sorry! You are not allowed to be here :(" message).

<script setup lang="ts">
import { JaaSMeeting } from '@jitsi/vue-sdk'
import { useLanguageStore } from '../stores/language'
import { useUserStore } from '../stores/user'
const userStore = useUserStore()
const languageStore = useLanguageStore()
const jwt = userStore.token
const lang = languageStore.language
const { VITE_APP_ID } = import.meta.env
const props = defineProps({
  roomName: String
})
const staging = false
</script>

<template>
  <JaaSMeeting :appId="VITE_APP_ID" :roomName="props.roomName" :jwt="jwt" :lang="lang" :useStaging="staging">
  </JaaSMeeting>
</template>

For comparison, this is how it worked (with display and auth) prior to the refactor without the Vue SDK and the same JWT:

<script lang="ts">
import { useLanguageStore } from '../stores/language'
import { useUserStore } from '../stores/user'
export default {
  props: {
    roomName: String
  },
  setup(props) {
    const languageStore = useLanguageStore()
    const userStore = useUserStore()
    const appId = import.meta.env.VITE_APP_ID
    const jitsi = new JitsiMeetExternalAPI('8x8.vc', {
      roomName: `${appId}/${props.roomName}`,
      parentNode: document.getElementById('meet'),
      width: 1600,
      height: 900,
      jwt: userStore.token,
      lang: languageStore.language
    })
    return {
      jitsi
    }
  }
}
</script>

<template>
</template>