Vue自定义元素身上的右键事件问题

<template>
    <div>
        <div id="demo" @contextmenu.prevent="openMenu($event)">
            <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" style="background:red;position:fixed">
                <li>历史记录1</li>
                <li>历史记录2</li>
                <li>历史记录3</li>
                <li>历史记录4</li>
            </ul>
        </div>
    </div>
</template>

export default {
    data() {
        return {
            visible: false,
            top: 0,
            left: 0
        }
    },
    methods: {
        openMenu(e) {
            console.log(e.clientX);
            console.log(e.clientY);
            
            this.left = e.clientX
            this.top = e.clientY

            this.visible = true

        },
        closeMenu() {
            this.visible = false
        }
    },
    watch: {
        visible(value) {
            if (value) {
                document.body.addEventListener('click', this.closeMenu)
            } else {
                document.body.removeEventListener('click', this.closeMenu)
            }
        }
    }
}

#demo {
    width: 50px;
    height: 50px;
    background: pink;
}