title: Can't close the modal in Ionic-vue 5.5.2
body: <p>in this version of @ionic/vue@0.5.5.2 I can't use a component and assign a reference (&lt; Login ref=&quot;modal&quot;/&gt;) to it to close it in the Modal component (Login.vue), so I don't know how to close it from Login.vue. I leave my code:</p>
  <p>Home.vue</p>
  <pre><code>&lt;template&gt;
  &lt;ion-page&gt;
      &lt;ion-header&gt;
          &lt;ion-toolbar&gt;
              &lt;ion-title&gt;
                  Title
              &lt;/ion-title&gt;
          &lt;/ion-toolbar&gt;
      &lt;/ion-header&gt;
  
      &lt;ion-content class=&quot;auth-form&quot;&gt;
  
          &lt;ion-grid&gt;
              &lt;ion-row&gt;
                  &lt;ion-col align-self-center&gt;
                      &lt;ion-button @click=&quot;openModal&quot; expand=&quot;block&quot; color=&quot;primary&quot;&gt;Registrarme&lt;/ion-button&gt;
  
                      &lt;span class=&quot;divider line one-line&quot;&gt;o&lt;/span&gt;
  
                      &lt;span class=&quot;already&quot;&gt;¿Tienes una cuenta?&lt;/span&gt;
  
                      &lt;ion-button @click=&quot;openModal&quot; expand=&quot;block&quot; color=&quot;danger&quot;&gt;Iniciar sesión&lt;/ion-button&gt;
                  &lt;/ion-col&gt;
              &lt;/ion-row&gt;
          &lt;/ion-grid&gt;
         
      &lt;/ion-content&gt;
  
  &lt;/ion-page&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {
      IonContent,
      modalController,
      IonTitle,
      IonToolbar,
      IonHeader,
      IonButton,
      IonCol,
      IonRow,
      IonGrid,
      IonPage
  } from '@ionic/vue';
  import Login from '../views/Login.vue';
  
  export default {
      name: 'inicio',
      components: {
         
          IonContent,
          IonTitle,
          IonToolbar,
          IonHeader,
          IonButton,
          IonCol,
          IonRow,
          IonGrid,
          IonPage
      },
      data() {
          return {
              modal: '',
              isOpen: false,
          }
      },
  
      methods: {
          async createModal() {
              this.modal = await modalController.create({
                  component: Login,
                  componentProps: {
                    title: 'Iniciar sesión'
                },
                  
              })
          },
          async openModal() {
              await this.createModal()
              this.isOpen = true
              this.modal.present()
          },
          closeModal() {
              this.isOpen = false
              this.modal.dismiss().then(() =&gt; {
                  this.modal = null;
              });
          },
      },
  }
  &lt;/script&gt;
  </code></pre>
  <p>And my Login.vue:</p>
  <pre><code>&lt;template&gt;
  &lt;ion-page&gt;
      &lt;ion-header translucent&gt;
          &lt;ion-toolbar&gt;
              &lt;ion-title&gt;{{ title }}&lt;/ion-title&gt;
              &lt;ion-buttons slot=&quot;end&quot;&gt;
                  &lt;ion-button @click=&quot;cerrarmodal&quot;&gt;Cerrar&lt;/ion-button&gt;
              &lt;/ion-buttons&gt;
          &lt;/ion-toolbar&gt;
      &lt;/ion-header&gt;
  
      &lt;ion-content&gt;
  
          &lt;ion-list&gt;
  
              &lt;ion-item&gt;
                  &lt;ion-label&gt;Email&lt;/ion-label&gt;
                  &lt;ion-input type=&quot;text&quot;&gt;&lt;/ion-input&gt;
              &lt;/ion-item&gt;
  
              &lt;ion-item&gt;
                  &lt;ion-label&gt;Contraseña&lt;/ion-label&gt;
                  &lt;ion-input type=&quot;password&quot;&gt;&lt;/ion-input&gt;
              &lt;/ion-item&gt;
  
          &lt;/ion-list&gt;
  
          &lt;ion-button color=&quot;primary&quot; expand=&quot;block&quot;&gt;Ingresar&lt;/ion-button&gt;
  
      &lt;/ion-content&gt;
  
  &lt;/ion-page&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {
      IonButtons,
      IonContent,
      IonButton,
      IonToolbar,
      IonHeader,
      IonTitle,
      IonList,
      IonLabel,
      IonInput,
      IonItem,
      IonPage
  } from '@ionic/vue';
  import {
      defineComponent
  } from 'vue';
  
  export default defineComponent({
      name: 'login',
      props: {
          title: {
              type: String,
              default: 'Super Modal'
          },
          closeMe: {
              type: Function,
              default: () =&gt; {
                  ''
              }
          },
      },
      data() {
          return {
              content: 'Content',
          }
      },
      methods: {
          cerrarmodal() {
              this.$emit('close', {
                  foo: 'bar'
              })
              // Not working
              this.$parent.closeModal()
          },
     
      },
      components: {
          IonButton,
          IonButtons,
          IonToolbar,
          IonList,
          IonInput,
          IonLabel,
          IonItem,
          IonPage,
          IonHeader,
          IonTitle,
          IonContent
      },
  });
  &lt;/script&gt;
  </code></pre>
  <p>I've tried $ emit and $ parent.closeModal () but no luck, thanks for your help in advance.</p>