Custom dialog with vue


So I want to create the custom dialog with vue, i understand in vue there is no Dialog component, so have to use the CORE Framework7.

Now the thing is, i declared in my page an HTML div with an id, that div has many elements like checkbox etc, that are using the vue v-if etc, to conditional render. Now i want o make the dialog use that div by using the id, I though i could do that using the “el” selector or even using the html object directly. But this does nothing, only the background is showing, is this possible?



Issue was the the Dialog HTML was missing some classes and structure required, like:

<div id="DialogSendEmail" class="dialog dialog-buttons-2">
      <div class="dialog-inner">
        <div class="dialog-title">_report_send_email_title_</div>
        <div class="dialog-text">_report_send_email_subtitle_</div>
        <div class="list no-hairlines-md ">
<div class="dialog-buttons"><span class="dialog-button">CANCELAR</span><span class="dialog-button">enviar</span></div>