Unable to use ref on component!

[mbnoimi]

Hi,
I want to get the label of a specific button in modal dialog. How can I do it?

<template>
  <q-page class="row items-center justify-evenly">
    <q-btn
      id="show-modal"
      @click="showModal = true"
      color="primary"
      icon="mail"
      label="Show Modal"
    />

    <Teleport to="body">
      <!-- use the modal component, pass in the prop -->
      <modal :show="showModal" @close="showModal = false">
        <template #header>
          <q-btn id="jassem" label="Check Port" ref="focusSubmit" />
        </template>
      </modal>
    </Teleport>
  </q-page>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Modal from 'src/components/ModalDialog.vue';

const showModal = ref(false);
const focusSubmit = ref(null);

onMounted(() => {
  ////// ERROR
  console.log(focusSubmit.value.label);
});
</script>

ModalDialog.vue

<script setup>
const props = defineProps({
  show: Boolean,
});
</script>

<template>
  <Transition name="modal">
    <div v-if="show" class="modal-mask">
      <div class="modal-container">
        <div class="modal-header">
          <slot name="header">default header</slot>
        </div>

        <div class="modal-body">
          <slot name="body">default body</slot>
        </div>

        <div class="modal-footer">
          <slot name="footer">
            default footer
            <q-btn class="modal-default-button" @click="$emit('close')">
              OK
            </q-btn>
          </slot>
        </div>
      </div>
    </div>
  </Transition>
</template>

Full project:
https://stackblitz.com/edit/quasarframework-dqsmke?file=src%2Fcomponents%2FModalDialog.vue%2Csrc%2Fpages%2FIndexPage.vue%3AL31

[mbnoimi]

I found the solution Thanks to Hiws on discord.

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import Modal from 'src/components/ModalDialog.vue';

let showModal = ref(false);
const focusSubmit = ref(null);
const dlg = ref(null);

async function doModal(event) {
  showModal.value = true;
  await nextTick();
  if (event) {
    console.log(focusSubmit.value.label);
  }
}
</script>