[vue.js] input 창 한글입력 바인딩 처리

위와 같이 인풋창에서 한글입력시 이벤트가 한템포 늦게 동작하는 경우가 발생한다. 한글이 2byte로 되어있기 때문에

이런문제가 생기는데, (한글뿐만 아니라, 일본어, 중국어도 마찬가지)

공식문서를 참고하면

IME를 요구하는 즉 한글과 같은 언어가 제대로 업데이트되기 위해서는 v-model대신 

input directive를 사용하라고 명시되어 있다.

 <input 
    type="email" 
    v-model="userId" 
 />

이런경우 코드를 아래와 같이 수정해 준다.

 <input class="user-email"
        type="email" 
        @input="userId = $event.target.value"
 />

아래와 같이 잘 나타난다.