Hidden navbar appear broken

Questions
1

I am playing with hiding the navbar dynamically, but it appears that the “hidden” prop is broken:

<template>
  <f7-page name="home" tab>
<!-- Top Navbar -->
<f7-navbar ref="navbar" title="Feed" :hidden="true"></f7-navbar>

<f7-block strong v-if="!user.cards">
  <h3>Ciao 👋</h3>
  <f7-button @click="getStarterPack" color="green">Apri il pacchetto di benvenuto</f7-button>
</f7-block>

<f7-popup class="demo-popup" :opened="showPackOpener">
  <f7-page>
    <f7-block>
      ciao
      <f7-button @click="hidePackOpener" color="red">chiudi</f7-button>
    </f7-block>
  </f7-page>
</f7-popup>


  </f7-page>
</template>

With this simple code, where you can see that navbar has the hidden property hidden. The navbar is still rendered.

The same thing happens if I give it a ref and try to hide it manually:

this.$refs.navbar.hide();

the navbar is still there.