How to hide sidebar nav menu when user clicks outside of sidebar nav menu using Vue js?

My SPA has an admin dashboard with a sidebar navigation menu that is visible by default when the viewport is larger than 991px. When the viewport is smaller than 991px, the navigation bar disappears and you see a hamburger icon that you can click to toggle (show/hide) the sidebar menu. Now the menu is only hidden when the little hamburger menu icon is clicked a second time. What I want is to close/hide the menu if the user clicks anywhere outside the menu. I am using Bootstrap-Vue for my UI.

So I have one <b-navbar toggleable="md" type="dark" variant="info"></b-navbar>.

What I want to do is something like this, but I know I'm mixing Javascript and Vue js, but not sure how to set it up.

data() {
    return {
        sidebarMenu: true
    }
}

<section class="app-sidebar" v-if="sidebarMenu">

<div class="main-panel" @click="hideSidebarNavMenu">

methods: {
    hideSidebarNavMenu() {
        this.sidebarMenu = false;
    },

    const navbarTogglerButton = document.querySelector(".navbar-toggler");

    navbarTogglerButton.addEventListener('click', function(event) {
        this.sidebarMenu = true;
    })
}

This main panel div will contain all the data for each page, so wherever they click this hideSidebarNavMenufunction should fire.

I only need this code to work if the viewport is smaller than 991px. Again, I'm getting some syntax errors in my methods, I believe because I'm trying to write Javascript in my method properties.

That's the idea. Thank you.