[Vue] How to make a navigable popup system?

Questions
1

In my <f7-app> I have a popup:

<f7-popup id="login-popup">
    <f7-view url="/login/" name="login-popup" links-view="#login-popup .view" class="ios-edges" />
</f7-popup>

There is some problems and things I’m having difficulties to grasp:

  1. url="/login/" doesn’t seem to work (the popup opens in my home /). I have solved this issue using:
<f7-popup id="login-popup">
    <f7-view url="/login/" name="login-popup" links-view="#login-popup .view" class="ios-edges">
        <login /> <!-- Login.vue page -->
    </f7-view>
</f7-popup>

but it smells like a hack =\

  1. The login will be a wizard, meaning I will navigate inside this popup. The problem is: when I close the popup, the wizard should be reset to the root /login/ page. Again, $f7router.clearHistory() seems like a hack (and I don’t even know if it will work).

TL;DR:
Basically, I need a navigable set of pages to be show every time the user access a protected page. Each time, the popup should have a brand new state.

2

The 1st thing should work, this is what i have in one of my apps:

<f7-app>
  ...
  <f7-popup ref="popup" :opened="$root.popupOpened" @popup:closed="onPopupClosed">
      <f7-view :url="$root.popupUrl" v-if="$root.popupUrl"></f7-view>
      <f7-preloader v-else></f7-preloader>
  </f7-popup>
</f7-app>

onPopupClosed() {
  this.$root.popupOpened = false;
  this.$root.popupUrl = null;
},

And i have this in Vue root instance:

data() {
  return {
    popupUrl: null,
    popupOpened: false,
  };
},

methods: {
  openPopup(url) {
    const self = this;
    self.popupUrl = url;
    self.popupOpened = true;
  },
  closePopup() {
    const self = this;
    self.popupOpened = false;
  },
},

It allows me to load any page i need in popup in app, e.g. this.$root.openPopup('some-url')

So you can adopt this logic to your login popup