Odd issue with tab, underline, and deselecting

[cfjedimaster]

I've got a set of tabs in my header and then a simple button at the right side, looks like so:

Here's my template for App.vue:

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >

    <v-tabs show-arrows>
      <v-tab
        to="/">
        Home
        </v-tab>
      <v-tab
        to="/about">
        About
        </v-tab>
    </v-tabs>

      <v-btn
        to="/test1"
        text
      >
        <span class="mr-2">Test1</span>
      </v-btn>
    </v-app-bar>

    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

I've got a router with 3 routes, one for the Home and About tabs, and one for Test1. Navigation works fine, but here's the weird thing.
If you navigate to Test1, the tab (whatever was last viewed, Home or About), will go to the deselected text color, but keep the white underline.

It may be hard to see, but "Home" in the above is showing the right "I'm not selected" color, but there's still an underline there.

Is there a way to remove it?

[cfjedimaster]

Figured it out thanks to https://stackoverflow.com/a/61701222/52160. Just add optional.