Not sure why, I need to close offcanvas after the user click on a <router-link> in my vue app.

I've imported the related component in this way

import { Offcanvas } from 'bootstrap/dist/js/bootstrap.esm'

And inside my methods I've created a method that will be called from the router link

        closeOffcanvas() {
            const offcanvasMenu = new Offcanvas(this.$refs.offcanvasNavbar)
            console.log(offcanvasMenu)
            offcanvasMenu.hide()
        },

<li class="nav-item">
<router-link class="nav-link" :to="userProfileURL" @click="closeOffcanvas">Profilo</router-link>
</li>

I've tested the data-bs-dismiss="offcanvas" but this will prevent the navigation to the requested route.

Any suggestion or tip to fix this?