Vue 3 Internal server error: v-model cannot be used on a prop, because local prop bindings are not writable

I found this error and blocked my webapps.

2:32:22 PM [vite] Internal server error: v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.
  Plugin: vite:vue
  File: /Users/julapps/web/myapp/src/components/switch/AudienceTimerSlide.vue

I want to make timer data become data model (editable) and its default value from component props. Why this not work? I'm very new in vuejs, how can i solve this problem? Kindly Please Help...

<template>
----
<div class="field-body">
    <div class="field">
        <div class="control">
            <input @keypress.enter="save" v-model="timer" type="number" class="input is-normal">
        </div>
    </div>
</div>
-----
</template>

<script>

export default {

    props:['id', 'timer'],
    setup(props, context){
    
        -----
        
        const save = async() => {
            // save form
        }
    
        return {
            
        }
    }
}
</script>

Props are read-only One-Way Data Flow

Use an internal data property with timer as initial value. Like this:

data() {
    return {
       localTimer: timer 
    }
}

and

 <input @keypress.enter="save" v-model="localTimer" type="number" class="input is-normal">

Or replace v-model with v-bind:value & emit an event

@input="$emit('update:modelValue', $event.target.value)"

Like this:

 <input @keypress.enter="save" :value="timer" @input="$emit('update:modelValue', $event.target.value)" type="number" class="input is-normal">