All $refs unavailable in mounted

[morkro]

This is a follow up to your comment. Please close if this is a duplicate to #118.

I am using PortalVue to render a dialog outside of the Vue application for accessibility reasons. Inside the <portal> I am assigning a ref to use that element for further logic. However, it never appears in this.$refs. My code looks like this:

<template>
  <portal name="" target-el="#dialog-root">
    <div :id="id" ref="rootElement">
      ...
    </div>
  </portal>
</template>

<script>
  export default {
    ...
    mounted () {
      console.log(this.$refs) // Empty Object
      this.$nextTick(() => {
        console.log(this.$refs) // Empty Object
      })

      this.dialog = new SomeLibrary(this.$refs.rootElement) // rootElement is `undefined`
    }
    ...
  }
</script>

I've already read myself through most issues here, including #118, but there doesn't seem to be a solution there yet? Even using the double this.$nextTick still has this.$refs.rootElement as undefined.

I basically just need access to the DOM element.

Please tell me if you need more details or examples :)

[morkro]

This issue was resolved when I removed name="" 🤔