Quasar Dialog如何挂载在根组件或父组件下？

<template>
  <q-dialog ref="dialogRef">
    <q-card>
      <q-card-section>
        <div class="text-h6">Dialog Content</div>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="OK" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
  <q-btn label="Open Dialog" @click="openDialog" />
</template>

<script>
import { ref } from 'vue';
import { QDialog, QCard, QCardSection, QCardActions, QPushButton } from 'quasar';

export default {
  components: {
    QDialog,
    QCard,
    QCardSection,
    QCardActions,
    QPushButton
  },
  setup() {
    const dialogRef = ref(null);

    const openDialog = () => {
      dialogRef.value.show();
    };

    return {
      dialogRef,
      openDialog
    };
  }
};
</script>