Help With Searchbar

Everything works good when I remove the searchbar from the code but with it cant work properly, The second tab is active and replace first one, second is replaced by third one and so on and when I am swipe the tabs, directly last tab displayed.

<template>
 <f7-page :page-content="false">
 <f7-navbar>
      <f7-nav-left>
        <f7-link class="panel-open" open-panel="left" icon="fa fa-bars"></f7-link>
      </f7-nav-left>
      <div class="title">Test</div>
      <f7-nav-right>
        <f7-link class="searchbar-enable" icon="fa fa-search"></f7-link>
      </f7-nav-right>
      <f7-searchbar search-container=".search-list" class="searchbar-components" search-item=".col-33" expandable></f7-searchbar>
    </f7-navbar>

  <f7-toolbar tabbar bottom>
    <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
    <f7-link tab-link="#tab-2">Tab 2</f7-link>
    <f7-link tab-link="#tab-3">Tab 3</f7-link>
  </f7-toolbar>
  <f7-tabs swipeable>
    <f7-tab id="tab-1" class="page-content" tab-active>
      <f7-block>
        <p>Tab 1 content</p>
        ...
      </f7-block>
    </f7-tab>
    <f7-tab id="tab-2" class="page-content">
      <f7-block>
        <p>Tab 2 content</p>
        ...
      </f7-block>
    </f7-tab>
    <f7-tab id="tab-3" class="page-content">
      <f7-block>
        <p>Tab 3 content</p>
        ...
      </f7-block>
    </f7-tab>
  </f7-tabs>
</f7-page>
</template>
<script>
</script>

Would be good to see live example or JSFiddle