Is it possible to mount the page of the view only when showed?

Questions
1

Hi, I am building an app with multiple view tabs with the Vue.js components:

<f7-view  id="view-club" name="club" tab url="/club/"></f7-view>
<f7-view  id="view-home" name="club" tab url="/home/"></f7-view>

But I have a problem, the views are already in the DOM, so the mounted events of my “club” page (the component rendered in the /club path/) runs as soon as the app starts.

Is there a way to mount a the page of the view only when the user clicks on the link on the bottom tabbar? Or is there an event to listen for internally in the Page component?

Right now I am doing an horrible thing to work around this problem:

I am using a a ref on the view and a method:

  methods: {
    initTab(e) {
      this.$refs.testRef.$children[0].initTab();
    }}

And on the view I am using the show event:

<f7-view
@tab:show=“initTab”
ref=“testRef”
id=“view-club”
name=“club”
tab
url="/club/"

It would be great to be able to listen for the show event in the page component instead of externally on the view. Is there a way?