如何在不同的组件（framework7和vuejs）中使用2个f7面板？

Question

我对其组件有2个视图。在这两种视图中，我都使用左面板，以这种方式工作。     组件1：

<f7-navbar class="bg-color-cyan-9">
           <f7-nav-left>
            <f7-link class="panel-open" open-panel="left" icon="fas fa-bars"></f7-link>
           </f7-nav-left> 
           <f7-nav-right>
           <f7-link class="searchbar-enable" data-searchbar=".searchbar-demo" icon-ios="f7:search" icon-aurora="f7:search" icon-md="material:search"></f7-link>
           </f7-nav-right>
           <f7-searchbar
            class="searchbar-demo"
            expandable
            search-container=".search-list"
            search-in=".item-title"
            placeholder="Realiza tu busqueda"
            :disable-button="!$theme.aurora"
           ></f7-searchbar>
           <f7-panel left cover>
            <PanelLeft></PanelLeft> <!--Esto ya lo tengo montado mediante components: {}-->
           </f7-panel>
        </f7-navbar>

组件2：

<f7-navbar>
                <f7-nav-left>
                 <f7-link class="panel-open" open-panel="left" icon="fas fa-bars"></f7-link>
                </f7-nav-left>
                  <div class="title"></div>
                <f7-nav-right>
                <f7-link
                  class="searchbar-enable"
                  data-searchbar=".searchbar-components"
                  icon="fas fa-search"
                 ></f7-link>
                </f7-nav-right>
                <f7-searchbar
                class="searchbar-components"
                search-container=".components-list"
                search-in="a"
                placeholder="Busqueda"
                expandable
                ></f7-searchbar>
               <f7-panel left cover>
               <PanelLeft2></PanelLeft2> <!--Esto ya lo tengo montado mediante components: {}-->
               </f7-panel>
            </f7-navbar>

两个视图均已加载，可以通过以下方式使用f7-toolbar：

<f7-toolbar tabbar labels class="toolbar-bottom-md bg-color-cyan-9">
 <f7-link tab-link route-tab-id="tab-1" v-if="pagina_principal == '1'" href="/">
    <f7-icon icon="fas fa-home" size="20px"></f7-icon>
    <span class="tabbar-label">Home</span>
 </f7-link>
 <f7-link tab-link route-tab-id="tab-1-2" v-else href="/licitacionesgeneral">
     <f7-icon icon="fas fa-home" size="20px"></f7-icon>
     <span class="tabbar-label">Home</span>
 </f7-link>
</f7-toolbar>
<f7-tabs routable>
  <f7-tab id="tab-1"></f7-tab>
  <f7-tab id="tab-1-2"></f7-tab>
</f7-tabs>

视觉上是这样的：

按“显示服务器”时，向我发送另一个视图，这是它在<f7-panel> </ f7-panel>中包含的第二个视图，在视觉上看起来像这样：

跳过以下错误：[ Vue警告]：挂接的钩子中出现错误：“错误：Framework7：无法创建面板；应用程序已经具有左侧面板！”

表示该应用程序已经有一个左面板，对于每个组件，我的左面板也必须具有不同的外观。

非常感谢。