odd issue with dialog root element not existing

[Mauricio Giraldo]

my app uses vue-a11y-dialog in a nested component while the #dialog-root is in the main app. i am getting a [portal-vue]: Mount Point '#dialog-root' not found in document error only in circumstances where the dialog component is being rendered straight away. it works if i wait for the component to be created (eg put a v-if="$el" in the dialog component). is this the expected behavior?

app.vue:

<template>
  <div id="app">
    <MyDialog v-if="$el" />
    <div id="dialog-root"></div>
  </div>
</template>

<script>
import MyDialog from 'components/MyDialog'

export default {
  components: { MyDialog }
}
</script>

components/MyDialog.vue:

<template>
  <div>
    <button type="button" @click="openDialog">
      Show dialog
    </button>
    <a11y-dialog
      id="my-dialog"
      app-root="#app"
      dialog-root="#dialog-root"
      @dialog-ref="assignDialogRef"
    >
    ... more stuff here 
    </a11y-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return { dialog: null }
  },
  methods: {
    assignDialogRef(dialog) {
      this.dialog = dialog
    },
    openDialog() {
      if (this.dialog) {
        this.dialog.show()
      }
    },
  }
}
</script>

in the code above, removing v-if="$el" will produce (error slightly edited):

[portal-vue]: Mount Point '#dialog-root' not found in document vue-a11y-dialog.js:499
[portal-vue] Target wasn't mounted vue-a11y-dialog.js:528
[Vue warn]: Error in nextTick: "TypeError: a is undefined"

found in

---> <VueA11yDialog>
       <MyDialog> at app/javascript/src/components/MyDialog.vue
           <App> at app/javascript/src/app.vue
             <Root> vue.runtime.esm.js:640
TypeError: "a is undefined"
    b vue-a11y-dialog.js:79
    mounted vue-a11y-dialog.js:614
    VueJS 2
[portal-vue] Target wasn't mounted

in case it is relevant, Vue itself is invoked in JS via:

import Vue from 'vue'
import VueA11yDialog from 'vue-a11y-dialog'
Vue.use(VueA11yDialog)

import App from 'app'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: (h) => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

right now my app works but it seems odd that i need to wait for $el to be available since i did not see it mentioned anywhere in the docs.

[Mauricio Giraldo]

any idea how to address this?

[Rob Levin]

You should consider upgrading to vue 3 if it's feasible. I'm fairly certain we're waiting until mounted to delegate to the lower level a11y-dialog so this issue goes away.

[Mauricio Giraldo]

yeah upgrading to vue 3 removes this problem