Component prop is not updated when emitting from a watcher

I have an issue with emitting from a watcher. I have this component that works as a custom input component and as you can see I'm watching changes on inputValue and I emit the new value for the prop modelValue to change. Unfortunately it doesn't seem to work and modelValue just stays the same as I debug (although I can have inputValue and newValue printing the updated value).

What would be the problem please?
PS: The watcher gets well triggered by changes on inputValue.

<template>
<div class="col-span-12">
<div class="flex">
<span
contenteditable="true"
class="editable"
:class="[fontBold ? 'font-bold' : '']"
:placeholder="placeholder"
@input="handleInput"
@focusout="$emit('savingValue')"
ref="editableSpan"
>
{{ inputValue }}
</span>
</div>
</div>
</template>
<script setup>
import { ref, nextTick, onMounted, watch } from "vue";
const emit = defineEmits(["update:modelValue","savingValue"]);
const props = defineProps({
modelValue: {
type: String,
required: true,
},
name: {
type: String,
default: "",
},
type: {
type: String,
default: "text",
},
required: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
label: {
type: String,
default: "",
},
placeholder: {
type: String,
default: "",
},
fontBold: {
type: Boolean,
default: false,
},
});
const inputValue = ref(props.modelValue);
const editableSpan = ref(null);
watch(inputValue, (newValue) => {
emit("update:modelValue", newValue);
});
const handleInput = () => {
inputValue.value = editableSpan.value.innerText;
};
</script>
<style scoped>
[contenteditable="true"]:empty {
color: #bbb;
}
.editable {
display: inline-block;
padding: 3px 2px;
outline: none;
cursor: text;
background-color: #edf3f1;
white-space: nowrap;
overflow: hidden;
}
[contenteditable="true"]:empty:before {
content: attr(placeholder);
}
</style>

I know I could use an input instead of a span but I can't just leave without knowing what could be the issue.

I went through vue documentation carefully and with some research also i found out that my logic wasn't quite good despite the code being okay. The prop is not supposed to be updated (and even though there are ways to update props they should be one way ideally).
My mistake here was that when trying to use this component i expected :modelValue="somevariable" on the parent component to be the way for me to access the value. Turns out i should be using v-mode="somevariable".
Thanks for your help.