this.message = $event.target.value;

    },
  },
}
</script>
<template>

  <input type="text" @input="onChangeHandler($event)" />

  {{ message }}
</template>

예제 코드처럼 입력 요소에 값이 변경됐을 때 v-model 디렉티브 대신에 input 이벤트를 사용해 이벤트 핸들러 함수를 호출합니다. 이벤트 핸들러 함수에서는 이벤트 객체를 전달받아 입력 요소의 값을 데이터에 반영합니다. 이렇게 하면 한글 입력도 문제없이 실시간으로 업데이트됩니다.

그림 3-38 input 이벤트로 한글 입력 문제 해결