Подкомпонент Vue 3 вызывает событие щелчка при отображении

В vue 3 Compose API я показываю компонент всплывающего окна и хочу зафиксировать щелчок для закрытия модального окна.

мой код в родительском компоненте

<template>
<button @click = "toggleSettings" class = "bg-gray-300 text-gray-700 px-4 py-2 rounded flex items-center">
<span>⚙️</span>
</button>
<ModalSettings :visible = "showSettings" @onClose = "toggleSettings"/>
</template>

<script setup lang = "ts">
  import { ref } from 'vue'
  const showSettings = ref(false)
const toggleSettings = () => {
  showSettings.value = !showSettings.value
}
</script>

Код моего дочернего компонента

<template>
    <div  v-if = "visible" class = "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div ref = "customDiv" @click.stop class = "bg-white p-8 rounded-lg shadow-lg w-96">
            <h2 class = "text-xl font-bold mb-4"> Settings</h2>
        </div>
    </div>
</template>

<script setup lang = "ts">
import { ref, onMounted, onUnmounted, nextTick, defineProps } from 'vue'

const customDiv = ref<HTMLElement | null>(null)

const props = defineProps({
    visible: Boolean
})

onMounted(() => {
  nextTick(() => {  
    setTimeout(() => {
      document.addEventListener('click', handleClickOutside)
    }, 1000)
  })
})

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside)
})

const handleClickOutside = (event: MouseEvent) => {
  if (customDiv.value && !customDiv.value.contains(event.target)) {
    console.info('close the popup')
  }
}
</script>

Проблема в том, что каждый раз, когда я показываю модальный компонент, это как если бы щелчок немедленно (событие с моим хаком тайм-аута) вызывался за пределами модального компонента и поэтому он закрывал компонент (здесь, в примере, он просто пишет «закройте неожиданно возникнуть")

Знаете ли вы, что происходит и как это предотвратить?