[Vuejs]-Vuetify Child Router View displaying incorrectly

I was able to fix the above using the ‘app’ prop for the components mentioned.

The below example uses my DashboardNavDrawer component where I added ‘app to the component:

<template>
  <v-navigation-drawer app class="deep-purple accent-4" dark permanent>
    <v-list>
      <v-list-item
        class="mx-2"
        v-for="(item, index) in mainMenuItems"
        :key="index"
        link
        :to="item.to"
      >
        <v-list-item-icon>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>
            {{ item.name }}
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

Adding this prop has made it look like the following screenshot which is the desired outcome:

The comment provided by YomS. lead me to this answer so I’d like to express appreciation for his help!