Vue 3 / Options Api Detect outside click

component.vue

<template>
  <div
    ref="componentRef"
    class="general-style"
  >
  </div>
</template>

<script>
import useDetectOutsideClick from '/useDetectOutsideClick'
export default {
    data(){
        return {
            data: 'hello'
        }
    },
    mounted(){
        useDetectOutsideClick(this.$refs.componentRef, () => {
            this.data = 'edit hello'
        })
    }
}
</script>

useDetectOutsideClick.js

import {onBeforeUnmount, onMounted} from 'vue'

export default function useDetectOutsideClick(component, callback) {
    if (!component) return
    const listener = (event) => {
        if (event.target !== component.value && event.composedPath().includes(component.value)) {
            return
        }
        if (typeof callback === 'function') {
            callback()
        }
    }
    onMounted(() => { window.addEventListener('click', listener) })
    onBeforeUnmount(() => {window.removeEventListener('click', listener)})

    return {listener}
}