Stack Exchange
v-model cannot be used on a prop, because local prop bindings are not writable
Hola tengo un component select option el cual me genera un error uso vue 3 con nuxt js
[plugin:vite:vue] 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.
/var/www/frontend.com/components/ui/FSelect.vue:36:20
34 |  <template>
35 |    <div class="select__container-select" >
36 |        <select v-model="modelValue" @change="updateValue" class="select__select">
   |                      ^

El componente que se realizo esta de esta manera.
import { ISelect } from "../../interfaces/interfaces";

const props = defineProps<{
    options: Array<any> | ISelect<any>[];
    modelValue: any;
    returnNumber?: boolean;
}>();
//Definiendo CustomEvent  y Custom v-model.
// El Event de 'change-value'  como su nombre indica para avisar cuando el valor cambia , es utilpor ejemplo para resetear paginacion o otros elemntos , sin agregar un watch explicitamente
const emit = defineEmits(["update:modelValue", "change-value"]);

// Por defecto los input retorna un string , pero pasandole el props returnNumber se puede parsear el resultado.
const updateValue = (event: any) => {
    emit(
        "update:modelValue",
        props.returnNumber ? parseInt(event.target.value) : event.target.value
    );
    emit(
        "change-value",
        props.returnNumber ? parseInt(event.target.value) : event.target.value
    );
};

</script>

<template>
    <div class="select__container-select">
        <select v-model="modelValue" @change="updateValue" class="select__select">

            <!--//? Se verifica si el props options es un array simple o un array de objetos -->
            <option v-for="opt in options" :key="opt.value ?? opt" :value="opt.value ?? opt">
                <slot name="options" :data="opt">{{ $t(opt.label ?? opt) }}</slot>
            </option>
        </select>
        <div class="select__arrow"></div>
    </div>
</template>

<style lang="scss" scoped>
@import "../../assets/sass/base/colors";

.select {
    &__label {
        display: block;
        align-self: start;
    }

    &__container-select {
        width: 100%;
        height: 32px;
        position: relative;
        border-radius: 0.25em;
        padding: 0.375rem;
        cursor: pointer;
        line-height: 1.1;

        background-color: #fff;
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.15);
        border-radius: 12px;
    }

    &__arrow {
        position: absolute;
        width: 8px;
        top: 50%;
        transform: translateY(-50%);
        right: 0.8rem;
        height: 8px;
        background-color: $app-primary;
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    }

    &__select {
        //Resetearde estilos ,incluyendo la flecha
        appearance: none;
        position: relative;
        background-color: transparent;
        border: none;
        padding: 0 2.68rem 0 1.68rem;
        margin: 0;
        width: 100%;
        outline: none;
        font-family: 1.25rem;
        cursor: inherit;
        color: $app-gray;
        line-height: inherit;
        z-index: 10;
    }
}
</style>


Rebuilding the Nuxt3 project into a new working directory helps me - the errors disappeared.
Its appear again if you try to upgrade the project to Nuht3-RC-13, for example, and are not removed when downgrading.
Or you may fix part of any points of errors in your code, but maybe it's a compiler error. Errors are detected in more places in the mode of "npm run build" than dev.

¡Estamos en [es.so]! Redacta tu respuesta en el idioma oficial del sitio.
