Goal

To make a input-like Vue 3 component that responds to physical keyboard and on-screen keyboard simultaneously.

Current Approach

Use a prop to receive input from on-screen keyboard and v-model on the <input> element to receive input from a physical keyboard. I've simplified the idea of an on-screen keyboard to just a button that types "ABC" into the input element. I've looked at this Stackoverflow post but it is in vanilla JS and what I want is an isolated input component so that I can choose what to combine it with.

// App.vue
<template>
    <button @click="typeABC">Type ABC</button>
    <Input :userInputFromProp="content">
</template>
<script>
import { ref } from 'vue'
import Input from "./Input.vue"

const content = ref<string>("")
function typeABC(event) {
    content.value += "ABC"
}
</script>

// Input.vue
<template>
    <input
        v-model="userInputFromProp"
        type="text"
    >
</template>
<script>
import { ref } from 'vue'

const props = defineProps( {
  userInputFromProp: {
    type: String as PropType<string>,
    required: false,
    default: () => "",
  },
} )

const { userInputFromProp } = toRefs(props)

</script>

Problem

There seems to be storing 2 separate copies of userInputFromProp If I click "Type ABC", the input does append "ABC" to the input content, but if I type "D" into the textbox after that and then click "Type ABC" again, the "D" disappears and I get "ABCABC". Also, I get warnings saying that I shouldn't mutate the prop directly. I'm aware of this but this is the closest I've ever got to my goal.

I'd appreciate any suggestion. Thank you for reading.