Close modal on click to any outside place

modalVue

<template>
  <div class="number" :style="{paddingLeft}" >
    <span>{{ title }}</span>
    <inline-svg :src="require('../../assets/images/Triangle-gray.svg')"></inline-svg>
    <inline-svg @click="showModal" :src="require('../../assets/images/filter.svg')" :fill="!isModalVisible ?'#D5DBE8':'#3773CC' "></inline-svg>
    <modal ref="modal" v-show="isModalVisible" @close="closeModal" :arrayOfTools="arrayOfTools"/>
  </div>
</template>
<script>

import modal from "@/components/Devices/modal";

export default {
  name: "DevicesColumn",
  props: {
    title: String,
    paddingLeft: String,
    arrayOfTools: Array,
  },
  components: {
    'modal': modal,
  },
  data() {
    return {
      isModalVisible: false,
    }
  },
  methods: {
    showModal(event) {
      //event.stopPropagation();
      this.isModalVisible = !this.isModalVisible;
    },
    closeModal() {
      this.isModalVisible = false;
    },
    closeModalOnClickHandler(event){
      const target = event.target;
      if (target != this.$refs['modal'].$el && !this.$refs['modal'].$el.contains(target)) {
        this.isModalVisible = false
      }
    }
  },
  watch: {
    isModalVisible: function (event) {
      if(event) {
        setTimeout(() => document.addEventListener("click", this.closeModalOnClickHandler), 100)
      }else{
        document.removeEventListener("click", this.closeModalOnClickHandler)
      }
    }
  }
}
</script>