My root component, main.js has the following template:

app.component('app-main',{
    data(){
        return{
            drawer:false,
        }
    },
    template: `
    <v-app-bar color="light-blue-lighten-3">
    <v-app-bar-nav-icon icon="mdi-library-shelves" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-app-bar-title class="font-weight-bold">My Library</v-app-bar-title>
        </v-app-bar>
        <v-navigation-drawer v-model="drawer" temporary >
            <GuestDashboard></GuestDashboard>
        </v-navigation-drawer>
        <v-main>
            <router-view></router-view>
        </v-main>
    `
});

It uses GuestDashboard component:

const GuestDashboard = {
    template:
    `
        <div class="d-flex flex-row mt-4 ml-3 mb-2 align-center">
        <div class="col-3"><v-avatar><v-img src="images/guest.jpg"  alt="profile"></v-img></v-avatar></div>
        <div class="col-9 text-left">Guest User</div>
        </div>
        <v-list>
            <v-list-item prepend-icon="mdi-home" value="home" :to="{path: '/'}" color="light-blue-darken-2">Home
            </v-list-item>

            <v-list-item prepend-icon="mdi-account-plus" value="signin" :to="{path: '/guest/signup'}" color="light-blue-darken-2">Sign Up
            </v-list-item>

            <v-list-item prepend-icon="mdi-login" value="login" :to="{path: '/guest/login'}" color="light-blue-darken-2">Login
            </v-list-item>
        </v-list>
    `
}

However, GuestDashboard is not showing up at all and I’m not sure why. I’ve already checked to make sure I’ve linked its javascript file in the html file. I also tried moving the tags into the GuestDashboard template but that didn’t solve the problem either.