Vue Router Active Link Not working on parent but works on children - vue-router

Question

My Setup
I have vue application using vue router with nested routes. I'm using vuetify as well. My issue is this....
My Issue
When I navigate on the Navbar, the active class isn't moving on the navbar. The menu item has a border-bottom on it to be able to have a "selected" feel to it.
In the code below are my routes. This pretty much speaks to the structure of my project too.
My approach is Views/Topic/ and I have a Page/Home/History/Detail
Expectation of my navbar functionality:
Approvals -- If you are on any of these these below, This will be highlighted
-> ApprovalPage -- This contains the menu and a router-view in a column
-> ApprovalHome -- This is a menu item in the approval page. It will be highlighted if it is selected
-> ApprovalHistory -- This is a menu item in the approval page. It will be highlighted if it is selected
-> ApprovalDetail -- This is a menu item in the approval page. It will be highlighted if it is selected
Example of my folder setup:
Approvals
-> ApprovalPage -- This contains the menu and a router-view in a column
-> ApprovalHome -- This will be rendered on the Approval Page
-> ApprovalHistory -- This will be rendered on the Approval Page
-> ApprovalDetail -- This will be rendered on the Approval Page
The navigation menu inside the ApprovalPage can navigate and highlight correctly. However, it's just the top nav that doesn't move.
The other thing is, everything renders correctly. It's just the active part of the top nav that doesn't work.
Here is my code
Routes
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/requests',
name: 'requests',
component: RequestsPage,
children: [
{
path: '',
name: 'RequestsHome',
component: RequestsHome,
},
{
path: 'history',
name: 'RequestHistory',
component: RequestHistory,
},
{
path: ':id',
name: 'RequestDetail',
component: RequestDetail,
},
],
},
{
path: '/approvals',
name: 'approvals',
component: ApprovalsPage,
children: [
{
path: '',
name: 'ApprovalsHome',
component: ApprovalHome,
},
{
path: 'history',
name: 'ApprovalsHistory',
component: ApprovalHistory,
},
{
path: ':id',
name: 'ApprovalsDetail',
component: ApprovalDetail,
},
],
},
{
path: '/workflows',
name: 'workflows',
component: WorkflowPage,
children: [
{
path: '',
name: 'workflowsHome',
component: WorkflowHome,
},
{
path: 'creator',
name: 'creator',
component: WorkflowCreator,
},
],
},
],
});
NavBar toolbar items
<v-toolbar-items
class="ml-5"
>
<v-btn
text
to="/"
exact
>
Home</v-btn>
<v-btn
text
to="/approvals/"
>
Approvals</v-btn>
<v-btn
text
to="/requests/"
>
Requests</v-btn>
<v-menu
tile
right
offset-y
open-on-hover
>
<template v-slot:activator="{ on }">
<v-btn
text
v-on="on"
to="/workflows/"
>
Workflows</v-btn>
</template>
<v-list>
<v-list-item to="/workflows/" exact>
<v-list-item-title>Workflows</v-list-item-title>
</v-list-item>
<v-list-item to="/workflows/creator" exact>
<v-list-item-title>Workflow Creator</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-toolbar-items>