Links are not visible on the Navbar

So I have my component Navbar.vue, and I am using a bootstrap navbar component in the Navbar.vue file. But it doesn't display the links in the navbar, although it displays the image.

Navbar.vue -

<template>
    <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="/"><img src="../assets/images/sitelogo.png" width="100" height="50" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <router-link class="nav-link" to="/">Home</router-link>
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link" to="/projects">Projects</router-link>
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link" to="/contact">Contact Me</router-link>
                    </li>
                </ul>
            </div>
        </nav>
    <div>
</template>

Home projects contact me doesnt show up only image shows up! help me!