Vue3 鼠标右键菜单，出来后，怎么让左点击其它地方 关了这个菜单

<div  @click.right="showMenu()" >  </div>   右点击这个div出现菜单，问题是怎么点其它任意地方 关了它，我这样写关不了
   
    <!-- 鼠标右键菜单 -->
    <div  v-show="showMouseMenu">
            <ul >
              <li @click="addElement">增加子元素</li>
              <li @click='removeElement'>删除当前元素</li>
            </ul>
        </div>
    </div>

    function showMenu(){
      data.showMouseMenu = true
      document.addEventListener('click', closeMenu)
    }
    function closeMenu(){ // 取消鼠标监听事件 菜单栏
      data.showMouseMenu = false
      document.removeEventListener('click', closeMenu) // 要及时关掉监听，
    }


请用例句说明，多谢


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>login</title>
        <style>
            #app {
                width: 100Vh;
                height: 100Vw;
            }
        </style>
    </head>

    <body>
        <div id="app" @click="showMouseMenu = false">
            <div @mousedown="showMenu($event)"> 右点击这个div出现菜单，问题是怎么点其它任意地方 关了它，我这样写关不了</div>
            <!-- 鼠标右键菜单 -->
            <div v-show="showMouseMenu">
                菜单
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            window.onload = function() {
                document.oncontextmenu = function(e) {
                    e.preventDefault()
                }

                var vm = new Vue({
                    el: "#app",
                    data: {
                        showMouseMenu: false
                    },
                    methods: {
                        showMenu(e) {
                            console.log(e.button)
                            if (e.button === 2) {
                                this.showMouseMenu = true
                            }
                        }
                    }
                })
            }
        </script>
    </body>

</html>

阻止弹出来的事件冒泡 第一种 然后在window下增加点击事件 第二种 有个大的弹窗 点击大的弹窗关闭


 mounted() {
    document.addEventListener('click',e => {
      if(!this.$el.contains(e.target)){
        this.showMouseMenu = false//点击其他区域关闭
      }else{
        this.showMouseMenu = true
      }
    })
  },

可以右键触发一个弹框，然后点击其他地方机会触发关闭

最外层的div就是你想要的菜单以外的地方，可以根据实际情况来


  <div style="background-color: #8e8e8e;width: 100%;" v-on:click="show_menu = !menu_mouser?false:true">
    <div style="background-color: #00bbd3;width: 20%;" v-on:mouseover="menu_mouser = true" v-on:mouseleave="menu_mouser = false" v-show="show_menu">
      <ul >
        <li @click="addElement">增加子元素</li>
        <li @click='removeElement'>删除当前元素</li>
      </ul>
    </div>
  </div>

别忘记在vue对象里面添加两个变量：menu_mouser: false,show_menu: true,