keyup.enter 질문드립니다.

<template>

    <div class="inputBox shadow">

        <!-- v-model : input에 입력된 텍스트를 동적으로 변화하게 해준다. -->

        <input type="text" v-model="newTodoItem" >

        <!-- <button v-on:click="addTodo">add </button>  -->

        <button class="addContainer" @click="addTodo" @keyup.enter="addTodo">ADD

            <i class="fa-solid fa-plus"></i>

        </button>

        <ModalTest v-if="showModal" @close="showModal = false">

          <template v-slot:header><h2>할 일을 입력하세요.</h2></template>

        </ModalTest>

    </div>

</template>

위의 코드와 같이  input에 아닌 button에 keyup.enter기능을 넣으면 어떻게 되나 궁금해서 넣었는데 해당버튼을 클릭하고 엔터를 누르면 버튼이 계속 눌러지는 상태가 지속됩니다. true false값을 줬지만 0.1초 사라지고 다시 팝업이 뜨더라구요. 찾아보니 button에는 이벤트 값이 없다? 이런 말들이 있는데 button을 엔터키로 제어하는법이 궁금합니다.