BravePositionDialog.vue

<div @click="$refs.bravedialog.show($event)" class="btn btn-lg btn-primary text-white px-4">
  <i class="bi bi-window"></i> Open Dialog
</div>

<BravePositionDialog ref="bravedialog" style="max-width:500px;" class="bg-light rounded shadow">
  <template  #header>
      <div class="p-2"><i class="bi bi-question-circle"></i> How it works</div>
  </template>
  <template #body>
     <div class="p-2">Lorem ipsum dolor sit amet consectetur aga nobis non autem!...</div>
  </template>
  <template #footer>
    <div class="p-2">
        <div class="btn btn-primary btn-sm text-white" @click="$refs.bravedialog.hide()">Close</div>
    </div>
  </template>
</BravePositionDialog>