What happened?

Following the documentation on how to use Quasar Dialogs with custom components, I ran into a problem when trying to open a dialog with multiple levels of nested components.

I have the following hierarchy:

• MyCustomDialog which renders DialogWithTitle as its only child
  • DialogWithTitle which renders DialogBase as its only child
    • DialogBase which renders QDialog as its only child and uses the useDialogPluginComponent function

When trying to open the dialog with $q.dialog({ component: MyCustomDialog }), I receive this error in the browser console:

[Quasar] Incorrectly defined Dialog component

This is most likely due to the limited level of component subtree resolving in the applyState function.

What did you expect to happen?

I would expect the component nesting to be unlimited, allowing me to open a custom dialog component with an arbitrary level of nesting as long as there is a correct usage of QDialog somewhere in the chain.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-fhgtkxky?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

1. Go to the provided reproduction link
2. Click on the first button
3. (Nothing happens)

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Plugins (quasar)

Platforms/Browsers

No response

Quasar info output

Relevant log output

Additional context

No response