Calling child method in parent component within a v-dialog

Question

Hi, I’m trying to call a method that’s in the child component through the parent component. The HOWEVER is that if I involve the child component specifically in a 'v-dialog' the code does not work, but if I put any other element as a 'div' involving the child, it works smoothly.

Here’s the way it works:

<v-btn @click="teste">CHAMAR METODO DO FILHO</v-btn>

<div>
  <PageTitle ref="form" />
</div>

And here’s the one that doesn’t work:

<v-btn @click="teste">CHAMAR METODO DO FILHO</v-btn>

<v-dialog>
  <PageTitle ref="form" />
</v-dialog>

The exception generated is

Error in v-on handler: "TypeError: Cannot read property 'submit' of undefined"

In the parent component I have this:

methods: {
    submit() {
      this.$refs.form.submit()
    }
  },

In the child component I have it:

methods: {
    submit() {
        ...
    }
  }

If anyone can help I’d appreciate it :D

SOLUTION

The problem is that the property this.$refs can only be accessed after rendering the component (friend tip James A), then I put my method to run on the property update() that executes something whenever the component is rendered.

More about the update()

Answer 1

To make it clearer, I’ll add the answer to my comment here:

The problem is this: in the documentation of Vue.js says that the content of this.$refs is populated after rendering, that is, if the element with the reference is not rendered, it will not be accessible via $refs.