I have nested tabs. The outer tabbar is working fine, and the active tab is indicated. But the inner tabs are not indicating the active tab.
Here is the code for the inner tabbar
<template>
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons if-md">menu</i>
</a>
</div>
<div class="title sliding">Sauti Café</div>
<div class="subnavbar">
<div class="subnavbar-inner">
<div class="toolbar toolbar-top tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#tab-artists" class="tab-link tab-link-active">
<i class="icon f7-icons if-not-md">home_fill</i>
<i class="icon material-icons if-md">person_outline</i>
<span class="tabbar-label">Artists</span>
</a>
<a href="#tab-music" class="tab-link">
<i class="icon f7-icons if-not-md">list_fill</i>
<i class="icon material-icons if-md">library_music</i>
<span class="tabbar-label">Music</span>
</a>
<a href="#tab-trending" class="tab-link">
<i class="icon f7-icons if-not-md">settings_fill</i>
<i class="icon material-icons if-md">trending_up</i>
<span class="tabbar-label">Trending</span>
</a>
<a href="#tab-fresh" class="tab-link">
<i class="icon f7-icons if-not-md">fire_fill</i>
<i class="icon f7-icons if-md">fire_fill</i>
<span class="tabbar-label">Fresh</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
...
What am I doing wrong?