[Vue.js] 日本語変換の確定でkeyup.enterが発火してしまうのを防ぐ

背景

Vue.jsでenterキー押下ですぐ送信できるチャットを作っていたら日本語入力を確定するenterでも送信されてしまい「ムキー！」となったので直した話をメモしておきます
(Vue.js特有の問題というわけではなくkeyupイベントをハンドリングする際に起きる問題です）

対応概要

• IME変換時でなければkeypressも発火する
• IME変換時はkeypressが発火しない

という性質を利用し、

• keypressイベントで送信可能フラグを立てておく
• keyup.enterイベントでフラグが立っていたら送信

とします。
フラグとかあまり使いたくないですが調べた感じこの対応が多かったです。
もっとスマートなやり方があったらぜひご教示ください。

コードはこんな感じ

<template lang="html">
  <section class="container">
    <input
      v-model="message"
      type="text"
      @keyup.enter="say"
      @keypress="setCanMessageSubmit">
  </section>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      canMessageSubmit: false
    }
  },
  methods: {
    setCanMessageSubmit() {
      this.canMessageSubmit = true
    },
    say: function() {
      if (!this.canMessageSubmit) {
        return
      }

      // -- submit message -- //

      this.message = ''
      this.canMessageSubmit = false
    },
  }
}
</script>

これで日本語変換の確定では送信されず、もう一度enterを押下したら送信されるようになりました。