Routable tabs not set to tab-active

I have a common tabbar as direct descendant of a f7-view:

<f7-view id="main-view" url="/" main>
<f7-toolbar tabbar labels>
      <f7-link tab-link tab-link-active href="/home/" text="Home"  route-tab-id="/home/"></f7-link>
      <f7-link tab-link tabs-routable href="/more/"  text="More"   route-tab-id="/more/" ></f7-link>
</f7-toolbar>

When I click one of the links, the correct ‘page’ is loaded/shown, but the tab-link-active class is not set. (if I set the class in custom code, everything works; but I thought F7vue would do that automatically?

Is there something missing?

I am using single-file components and routes, etc… are set-up and work fine.

Any hint appreciated

I have the same issue… anyone?

<!-- Main View -->
<f7-view id="main-view" url="/login/" main class="safe-areas"> 
  <f7-toolbar labels bottom tabbar>
    <f7-link tab-link route-tab-id="tab-1" href="/schedule/" tab-link-active :text="language.button_bar.scheduling" icon-f7="calendar"></f7-link>
    <f7-link tab-link route-tab-id="tab-2" href="/availability/" :text="language.button_bar.availability" icon-f7="check_round"></f7-link>
    <f7-link tab-link route-tab-id="tab-3" href="/trade/" :text="language.button_bar.trade" icon-ios="material:compare_arrows"></f7-link>
    <f7-link tab-link route-tab-id="tab-4" href="/timeoff/" :text="language.button_bar.timeoff" icon-f7="timer"></f7-link>
  </f7-toolbar>
  <f7-tabs>
    <f7-tab id="tab-1" class="page-content"></f7-tab>
    <f7-tab id="tab-2" class="page-content"></f7-tab>
    <f7-tab id="tab-3" class="page-content"></f7-tab>
    <f7-tab id="tab-4" class="page-content"></f7-tab>
  </f7-tabs>
</f7-view>