Safari+contentedtable에서 일본어로 중복 입력된 증상을 변환하는 회피법

<template>
  <div class="content-editable-page">
    <div contenteditable="true" class="editable"
         ref="editable"
         @keyup="moveCaret"
    ><p>test</p></div>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default Vue.extend({
    components: {
    },
    data () {
      return {
      }
    },
    computed: {
    },
    methods: {
      moveCaret () {
        const anchor = document.createElement('span')
        const sel = window.getSelection()
        const range = sel.getRangeAt(0)
        range.insertNode(anchor)
        const pos = anchor.getBoundingClientRect()
        anchor.parentElement.removeChild(anchor)
      }
    },
    mounted() {
    }
  })
</script>

<template>
  <div class="content-editable-page">
    <div contenteditable="true" class="editable"
         ref="editable"
         @compositionstart="compositionstart"
         @compositionend="compositionend"
         @keyup="moveCaret"
    ><p>test</p></div>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default Vue.extend({
    components: {
    },
    data () {
      return {
        compositing: false
      }
    },
    computed: {
    },
    methods: {
      moveCaret () {
        if (!this.compositing) {
          const anchor = document.createElement('span')
          const sel = window.getSelection()
          const range = sel.getRangeAt(0)
          range.insertNode(anchor)
          const pos = anchor.getBoundingClientRect()
          anchor.parentElement.removeChild(anchor)
        }
      },
      compositionstart () {
        this.compositing = true
      },
      compositionend () {
        this.compositing = false
      }
    },
    mounted() {
    }
  })
</script>