У меня есть компонент TodoItem <template> <div class="todo-item">

Question

У меня есть компонент TodoItem <template> <div class="todo-item">

<span>{{ text }}</span>
<button @click="$emit('remove', id)">delete</button>
</div>
</template>

здесь при нажатии на button генерируется событие remove которое я хочу ловить в родительском компоненте

Вот компонент App
<template>
<div id="app">
<div class="todo-list" @remove="remove">
<todo-item
v-for="todo in todos"
:key="todo.id"
:text="todo.text"
:id="todo.id"
></todo-item>
</div>
</div>
</template>

Но это не работает, обработчик навешен на div todo-list, который по моей логике и является родительским компонентом, но ничего не происходит

Если же обработчик повесить непосредственно на <todo-item> то все работает. Объясните логику. Ведь это не элемент, как мы можем на него повесить обработчик?