Vue Single Page Application Bootstrap 5 Nav not shrinking on mobile - css

Question

I am building a Single Page Website using Vue 3, and I am using Bootstrap 5 for css. The navbar is one of the standard templates on the bootstrap examples page. My issue is that on mobile, when the collapsed navbar is exposed, it doesn't close. I assume this is because it's a single page application, and the nav holds it's state.
I would like the navbar to automatically collapse on the click of one of the router links. I have seen a number of answers on other StackOverflow threads that use Jquery, but I would like to use plain JS if possible. If there is a fix with bootstrap classes, that would also be great.
I have tried adding the data-bs-toggle and the data-bs-targetto the router links, but that just breaks the router links, and doesn't change anything.
Thanks in advance
Here is the html for the nav:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img class="bike" :src="bikeSVG" /></a>
<button
type="button"
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<router-link to="/" class="nav-link active">Home</router-link>
</li>
<li class="nav-item">
<router-link :to="{ name: 'Events' }" class="nav-link active"
>Events</router-link
>
</li>
</ul>
<div v-if="!this.$store.state.auth.status.loggedIn">
<router-link
class="nav-item mx-2 btn btn-yellow fw-bold"
:to="{ name: 'LogIn' }"
>Log In</router-link
>
<router-link
class="mx-2 btn btn-yellow fw-bold"
:to="{ name: 'SignUp' }"
>Sign Up</router-link
>
</div>
<div v-else>
<div class="btn-group">
<button
type="button"
class="btn btn-red dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Profile
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<router-link
class="dropdown-item"
type="button"
:to="{ name: 'Profile' }"
>Your Profile</router-link
>
</li>
<hr />
<li><a class="dropdown-item" #click="logout">Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>