Because the f7 toolbar is not applied 'bottom'?

I am applying in the form of the documentation, the detail that does not apply at the bottom of the view.

    <f7-page :page-content="false">
        <f7-navbar title="Tabbar Labels" back-link="Back">
      <f7-nav-right v-if="$">
        <f7-link icon-material="compare_arrows" @click="isBottom != isBottom"></f7-link>
    <f7-toolbar tabbar labels :bottom-md="isBottom">
      <f7-link tab-link="#tab-1" tab-link-active text="Tab 1" icon-ios="f7:email_fill" icon-md="material:email"></f7-link>
      <f7-link tab-link="#tab-2" text="Tab 2" icon-ios="f7:today_fill" icon-md="material:today"></f7-link>
      <f7-link tab-link="#tab-3" text="Tab 3" icon-ios="f7:cloud_fill" icon-md="material:file_upload"></f7-link>

      <f7-tab id="tab-1" class="page-content" tab-active>
          <p>Tab 1 content</p>
      <f7-tab id="tab-2" class="page-content">
          <p>Tab 2 content</p>
      <f7-tab id="tab-3" class="page-content">
          <p>Tab 3 content</p>

import {f7Page, f7Navbar, f7Card, f7CardContent, f7CardFooter, f7CardHeader, f7Block, f7BlockTitle, 
        f7Link, f7List, f7ListItem, f7Toolbar, f7Tabs, f7Tab, f7PageContent, f7Button, f7Icon, f7ListInput,
        f7Popup, f7NavRight, f7Swiper, f7SwiperSlide, f7Col, f7Row, f7Fab} from "framework7-vue";
  export default {
    data() {
      return {
        isBottom: false,

But visually it looks like this:

Just omit how the icons look, the detail arises that does not apply at the bottom.
Please if you could support me with that topic, thank you very much.

When making the change in the console, the toolbar-bottom class is actually displayed

Are you using latest version of F7?