How to hang an event handler outside the component zone?

Question

Vue.js

I have a select component and the problem arose, I don’t understand how outside the component zone, if the user checked, then the event fired
My example

<template>
    <div class="select-app">
        <input type="text" class="field-form" :value="name" @click="onClick" :placeholder="`Выберите ${placeholder.toLowerCase()}`">
        <transition name="fade">
            <ul v-show="disabled">
                <li v-for="option in options" @click="checkOption(option)" :class="{ active: option.id === id }">
                    <span>{{ option.name }}</span>
                </li>
            </ul>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "BaseSelect",
        props: ["options", "placeholder"],
        data() {
            return {
                name: null,
                id: null,
                disabled: false
            }
        },
        methods: {
            onClick() {
                return this.disabled = this.disabled !== true;
            },
            checkOption(value) {
                this.name = value.name;
                this.id = value.id;
                this.disabled = false;
            }
        },
        created() {
            document.addEventListener("onclick", this.onClick)
        }
    }
</script>

I thought that I could hang a handler on the house, document.addEventListener("onclick", this.onClick)but for some reason it didn’t work

Answer 1

Not onclick but click
document.addEventListener("click", this.onClick)