[V2] Framework7-Vue current view always return main view

Questions
1

This is my App.vue

<!-- Right Panel -->
<f7-panel right cover :color-theme="themeColor" @panel:opened="onPanelRightOpen" @panel:closed="onPanelRightClosed" style="width: 80%; max-width: 400px;">
  <f7-view url="/panel-right" name="right"></f7-view>
</f7-panel>

<!-- Main View -->
<f7-view
  id="main-view"
  url="/"
  main
  :color-theme="themeColor"
  :stackPages="true"
  :pushState="true"
  :pushStateSeparator="pushStateSeparator"
  :pushStateRoot="pushStateRoot">
</f7-view>

and I called:

created () {
  console.log(this.$f7.views.current)
  console.log(this.$f7.views.right)
  console.log(this.$f7.views.main)
  console.log(this.$f7.views.current.main)
}

in panel-right

but it seems to me that

console.log(this.$f7.views.current)

always returns main view.

$el: Dom7
$navbarEl: undefined
app: Framework7
cache: Object
el: div#main-view.view.view-main.color-theme-green
eventsListeners: Object
eventsParents: Array(1)
history: Array(1)
id: "view_main"
index: 2
main: true
name: undefined
navbarEl: undefined
params: Object
router: Router
routes: Array(24)
scrollHistory: Object
selector: "#main-view.view.view-main.color-theme-green"

What should I do to get the view in right panel instead of main view?

2

Current view behaves like a function, it always returns currently active/visible view. So it will return panel view only when panel is opened. So it is better to refer relevant view in your case. If you try to access within loaded page (by router), then you can know parent view instance as this.$f7router.view