更新: 添加完整示例：

test.vue文件 (点击id为content的p,flag的值不会改变;点击页面的其他地方，flag的值会改变)

<template>
  <div class="test">
    <p id="content">******* {{ flag }}****</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: true,
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClick)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClick)
  },
  methods: {
    change() {
      this.flag = !this.flag
    },
    handleClick(e) {
      const content = document.getElementById('content')
      !content.contains(e.target) && this.change()
    },
  },
}
</script>

一、报错信息：

Uncaught TypeError: _this.$refs.contextMenuBox.contains is not a function at HTMLDocument.eval

代码如下：

  mounted() {
    // 监听，除了点击自己，点击其他地方将自身隐藏
    document.addEventListener("click", e => {
    const flag =this.$refs.contextMenuBox.contains(e.target);
      if (!flag) {
        this.rightFlag = false;
      }
    });
  },

报错截图：

二、解决办法 ( 正解 ）

用js原生获取dom的方法代替ref方式

实现效果的代码如下：

   mounted() {
   	 // 监听，除了点击自己，点击其他地方将自身隐藏
      document.addEventListener("click", e => {
      const contextMenuBox= document.getElementById("contextMenuBox");
      if (contextMenuBox) { 
        if (!contextMenuBox.contains(e.target)) {
          this.rightFlag = false;
        }
      }
    });
  },

三、究其原因

ref方式获取的和js原生方式获取的dom类型不同，故用原生的js获取dom方式代替ref方式即可。

   mounted() {
   	 // 监听，除了点击自己，点击其他地方将自身隐藏
      document.addEventListener("click", e => {
      console.log("原生js获取：", document.getElementById("contextMenuBox"));
      console.log("Vue的ref方式：", this.$refs.contextMenuBox);
      const flag = document.getElementById("contextMenuBox").contains(e.target);
      if (!flag) {
        this.rightFlag = false;
      }
    });
  },

俩类型不同：

ref方式获取的和js原生方式获取的dom类型不同，用原生的js获取dom方式代替ref方式即可 ,如
document.getElementById(“box”).contains(e.target)
第一种方法中的其它地方不作改变

四、关于Node.contains()

Node.contains()返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。

参考：MDN