Tab Content not Changing

I have the following
<script>
    import { MDBNav, MDBNavItem, MDBNavLink } from "mdbsvelte";
</script>

<MDBNav role="tablist" class="nav-pills nav-pills-icons">
  <MDBNavItem>
      <MDBNavLink active show href="#agencies" role="tab" data-toggle="tab" aria-selected="true">
          <i class="material-icons">calendar_today</i>
          Agencies
      </MDBNavLink>
  </MDBNavItem>

  <MDBNavItem>
      <MDBNavLink href="#productions" role="tab" data-toggle="tab">
          <i class="material-icons">movie_creation</i>
          Productions
      </MDBNavLink>
  </MDBNavItem>

  <MDBNavItem>
      <MDBNavLink href="#background-artists" role="tab" data-toggle="tab">
          <i class="material-icons">monetization_on</i>
          Background Artists
      </MDBNavLink>
  </MDBNavItem>
</MDBNav>

<div class="tab-content tab-space">
    <div class="tab-pane active show" id="agencies">
        <ol>
            <li>Sign up for an Agency account and import your Background Artists using our simple uploader.</li>
            <li>Query your new database of Background Artists with our easy to use Production Planner.</li>
            <li>Share this list directly with the Production team for them to review.</li>
            <li>Send a booking directly to the Background Artist with all the suitable details.</li>
            <li>Once filming wraps, process their payments using our eChit system within the app.</li>
        </ol>
    </div>

    <div class="tab-pane" id="productions">
        <ol>
            <li>Sign up for a Production account and send your requirements to your chosen agencies (you can change these requirements at any time and resend instantly).</li>
            <li>Receive a list of potential Background Artists from your chosen agencies, select which Artists you would like to book.</li>
            <li>Receive a confirmation once all Background Artists have been booked.</li>
            <li>Once your production wraps and you have everything you need from your Background Artists, approve their eChit using our app.</li>
            <li>Pay your agency using the Castily platform via a variety of sources.</li>
        </ol>
    </div>

    <div class="tab-pane" id="background-artists">
        <ol>
            <li>Sign up for a Background Artist account and upload your details, headshots, credit and film-reel.</li>
            <li>Confirm your availability for potential bookings, or put yourself forward for any open requests.</li>
            <li>Once you receive a booking request from an agency, confirm your attendance within the app.</li>
            <li>Get yourself on set following the instructions in your booking confirmation.</li>
            <li>At the end of filming, present your eChit for approval and wait for the money to hit your bank account a few days later!</li>
        </ol>
    </div>

</div>
Yet when I click on one of the tabs, the URL gets the #production (for example) anchor and the page reloads, it doesn't switch between my tab content..
Is this a bug in Nav Tabs with pills, or have I done something wrong?
mdbootstrap / mdbsvelte

Tab Content not Changing #15
