Nuxt, Vue. Значение не обновляется согласно v-model

Задача: необходимо кастомное форматирование поля ввода.
Объясните, что здесь происходит и как добиться корректного обновления поля ввода? Есть пара простейших компонентов:

// uiInput.vue
<template>
    <input v-model="model" type="text" />
    <br />
    inner value is {{ model }}
</template>

<script setup lang="ts">
const model = defineModel<string>({ default: '' });
</script>

// app.vue
<template>
    <UiInput v-model="computedA" />
    <br />
    valueA is {{ valueA }}
    <br />
    computedA is {{ computedA }}
</template>

<script setup lang="ts">
const valueA = ref('');
const computedA = computed({
    get: () => valueA.value,
    set: (value) => {
        valueA.value = clamp(value);
    }
})

const clamp = (str: string) => {
    return str.slice(0, 3);
};
</script>

По задумке, поле ввода должно обрезаться до трех символов, и больше ввести нельзя. По факту получаем вот что: