Как добавить обаботчик клика на document после хука mounted компонента на vue 3?(а не одновременно)?

В Vue 3 в отличие от Vue 2 нельзя добавить обработчик клика на document после хука mounted непосредственно в компоненте. Однако, есть несколько способов достичь желаемого результата.

1. Использование глобального события click
Вместо добавления обработчика клика на document можно использовать глобальное событие click и обрабатывать его в родительском компоненте или в экземпляре Vue. Для этого можно добавить следующий код в родительский компонент:

mounted() {
  document.addEventListener('click', this.handleClick);
},
beforeUnmount() {
  document.removeEventListener('click', this.handleClick);
},
methods: {
  handleClick(event) {
    // обработка клика
  }
}

2. Использование директивы
Другой способ - использование пользовательской директивы, которая будет добавлять обработчик клика на document. Вот пример, как это можно сделать:

//в директиве
const clickOutside = {
  mounted(el, binding) {
    const handleClick = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event);
      }
    };

    el.__clickOutside__ = handleClick;
    document.addEventListener('click', handleClick);
  },
  beforeUnmount(el) {
    document.removeEventListener('click', el.__clickOutside__);
    delete el.__clickOutside__;
  }
};

//в компоненте
<template>
  <div v-click-outside="handleClick">Кликни вне этого элемента</div>
</template>

<script>
import { ref } from 'vue';

export default {
  directives: {
    clickOutside
  },
  methods: {
    handleClick(event) {
      // обработка клика
    }
  }
}
</script>

Это два основных способа добавления обработчика клика на document после хука mounted в Vue 3. Оба способа достаточно гибки и могут быть адаптированы под различные сценарии использования.