Call Vue Popover methods from code

Questions
1

Bit of a newbie question here but how do I call methods on the Vue Popover component, in JS, from say a parent component? For example, if I want to close the popover programatically, how would I get the instance of it from elsewhere, in order to call the close method:

<f7-page>
  <f7-navbar title="Popover"></f7-navbar>
  <f7-toolbar bottom>
    <f7-link popover-open=".popover-menu">Open Popover</f7-link>
  </f7-toolbar>

  <f7-popover class="popover-menu">
    <f7-list>
      <f7-list-item link="#" popover-close title="Dialog"></f7-list-item>
      <f7-list-item link="#" popover-close title="Tabs"></f7-list-item>
      <f7-list-item link="#" popover-close title="Side Panels"></f7-list-item>
      <f7-list-item link="#" popover-close title="List View"></f7-list-item>
      <f7-list-item link="#" popover-close title="Form Inputs"></f7-list-item>
    </f7-list>
  </f7-popover>
</f7-page>
2

In F7 you can just call app.popover.close() or this.$f7.popover.close() (if calling in Vue component context). It will close any opened popover automatically.

Or you can close/open it by passing popover CSS selector app.popover.close('.popover-menu')

3

Of topic but related: Is it possible to position the popup in another coordinate, for example, when i set the popover width via css, then the popover is always aligned in the right corner, but offset from the element I want to click. How do i get the instance?