I'm new to Vue. I'm trying to create an auto-growing input. I have found out that there is no way to create real <input> which fits its content (where I can use v-model for changing the value). So I created a <span> which acts like an input. But I can't get the input value out of it after changing it.

To sum up the functionality – my "speed" value can be adjusted by buttons + and - (works), or by typing new number (does not work).

My code:

<script setup>
    import { ref } from 'vue'

    const speed = ref(20)

    function minus() {
        speed.value--
    }

    function plus() {
        speed.value++
    }
</script>

<template>
    <h2>Speed:</h2>
    <button @click="minus">−</button>
    <span class="input" role="textbox" contenteditable>{{speed}}</span>
    <button @click="plus">+</button>
</template>