Как правильно использовать директиву :key в пользовательском компоненте?

Директива :key используется для определения уникального идентификатора элемента в списке, чтобы Vue мог эффективно обновлять и перерисовывать только те элементы, которые были изменены. 

Чтобы использовать директиву :key в пользовательском компоненте, вы можете просто добавить её к элементу списка или другому элементу, который должен иметь уникальный идентификатор. Например:

```html
<template>
  <div>
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
```

Чтобы настроить директиву так, чтобы она срабатывала только на конкретный элемент (фильтр), вам нужно добавить атрибут :key к этому элементу с уникальным идентификатором. Например:

```html
<template>
  <div>
    <input type="text" v-model="filter" :key="filter">
    <div v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
```

В этом примере элемент с фильтром будет перерисовываться только при изменении его значения. Элементы списка будут обновляться в соответствии с новым фильтром.

напиши директиву отдельно от компонента и потом повесь на нужный элемент. 
 
import {Directive, DirectiveBinding} from "vue";

export const clickOutside: Directive<HTMLElement, string> = {
    mounted(el: HTMLElement, bind: DirectiveBinding) {
        if(bind.value) {
            window.addEventListener('click', (e) => {
                if(!el.contains(<HTMLElement>e.target)) {
                   bind.value()
                }
            })
        }
    },
    unmounted: function (el: HTMLElement, bind: DirectiveBinding) {
        if(bind.value) {
            window.removeEventListener('click', (e) => {
                if(!el.contains(<HTMLElement>e.target)) {
                    bind.value()
                }
            })
        }
    }
}
 
 Это общая директива. И затем вешаешь на любой компонент какой нужен на корневой div 
 
 
<div v-click-outside="() => isFilterOpen = false">
   ....
 </div>
 
 
 А твоя директива закрывает все сразу компоненты, потому что это логично. Если она работает на всех твоих фильтрах, то клик вне конкретного фильтра - его закрывает. Соответственно если у тебя открыты все сразу фильтры и ты кликнешь ГДЕ УГОДНО на странице, то закроются все фильтры сразу. 
 Конечно, если кликнуть на фильтре вместо "где угодно", то закроются все фильтры кроме того, на котором ты кликнул