iOS Safari input typing issue when clear value

Question

I am creating a custom clear button that clears the value of an input.

Type some text and tap the clear button, and then programmatically return focus to the input, I won't be able to continue typing. The caret is blinking, but I can't input anything when I type on the soft keyboard.

This issue occurs on iOS (13.6.1) Safari, not Chrome.

<template>
  <div id="app">
    <input type="text" v-model="value" ref="input" />
    <button @click="clear">Clear</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    clear() {
      this.value = "";
      this.$refs.input.focus();
    }
  }
};
</script>

demo: https://codepen.io/fellows3/pen/vYGyjjV

Has anyone seen this before and, if so, is there a way to prevent it?

UPDATE: I have noticed that this happens on a Japanese keyboard and cannot be reproduced on an English keyboard.