VOnsNavigator page stack update error: Error in callback for watcher "pageStack": "TypeError: Cannot read property '$el' of undefined"

[tomsaleeba]

Environment

Onsen UI Version:

• 2.10.10

Framework:

• Vue 2.6.11

Framework binding:

• vue-onsenui 2.6.2

Additional libraries:

• none

Platform:

• tested on Linux Chrome 84, but should affect all platforms

Encountered problem

Using a v-ons-navigator, update the page stack during or after mounted. I would expect that the top of the new stack is the component that is displayed and without error. The actual behaviour is the component is displayed but this error, from the pageStack watcher, is thrown:

vue.js:634 [Vue warn]: Error in callback for watcher "pageStack": "TypeError: Cannot read property '$el' of undefined"

found in

---> <VOnsNavigator>
       <Root>

TypeError: Cannot read property '$el' of undefined
    at VueComponent.pageStack (vue-onsenui.js:1163)
    at Watcher.run (vue.js:4567)
    at flushSchedulerQueue (vue.js:4311)
    at Array.<anonymous> (vue.js:1989)
    at flushCallbacks (vue.js:1915)

The problem is that the watcher is triggered when there are no $children but the code expects that there is at least one child.

I don't know why there aren't any children, I guess they haven't been mounted yet? I'm also open to the fact that I might be using the component incorrectly.

How to reproduce

See my minimal reproduction here: https://github.com/tomsaleeba/onsen-vue-navigator-error-demo. I've written more about the issue in the README.

[github-actions]

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.