Vue ошибка в компоненте withDirectives can only be used inside render functions?

Question

[Tereverda]

В документации есть пример селекта я хочу создать по сути то же самое, но внутри компонента и получаю ошибку [Vue warn]: withDirectives can only be used inside render functions.

Насколько я понял v-model почему, то перестает работать в компонентах.
Хотя и переменная и шаблон отображения внутри одного компонента.

import BoxSelectOptions from '/resources/js/components/BoxSelectOptions.vue'

Vue.createApp({
    components: { BoxSelectOptions },
    data () {
        return {
            // Данные из формы
            fefco: '0201',
            options: '', // начальное значение selected
        }
    },
    methods: {},
    mounted: function () {}
}).mount('#app');

// Тут получаю данные из корневого приложения в input v-model="fefco" и "options"
<box-select-options
 v-model:fefco="fefco"
 v-model:options="options" // начальное значение selected
>
</box-select-options>

<script>
    export default {
        props: ['fefco', 'options',],
        data() {
            return {
                // Данные из формы
                selected: '',
            }
        },
        created() {
            this.selected = this.options; // тут из пропса задаю начальное значение селекту
        },
        methods: {
           // из-за того что v-model не работает, получаю данные из события
            updateSelect(event) {
                this.selected = event.target.value;
            }
        }
    }
</script>

<template>
    <p>
        {{ selected }} при изменении срабатывает, по событию, начальное значение из пропса не передается
    </p>

// опции статичные, они скрываются или отображаются в зависимости от значения пропса fefco
    <select class="form-select" name="options" v-model="selected" @change="updateSelect">
        <option value="options_no" >Без доп.опций</option>

        <!-- Слоттер -->
        <option v-if="fefco == '0200' || fefco == '0201' || fefco == '0203'" value="vyrubka">Вырубка ручек</option>
        <option v-if="fefco == '0200' || fefco == '0201' || fefco == '0203'" value="skoby">Сшивка скобами</option>
        <option v-if="fefco == '0200' || fefco == '0201' || fefco == '0203'" value="profile_c">Профиль С</option>

        <!-- 0410 -->
        <option v-if="fefco == '0410'">Склейка по длинной стороне</option>

        <!-- 0427 -->
        <option v-if="fefco == '0427'" value="ruchka">Пластиковая ручка</option>

        <option value="bely">Печать белым</option>
    </select>
</template>

1. Не понимаю почему не работает v-model
2. Как задать value, чтобы значения формы уходили в POST

Comments

[Aetae]

Ну почитай документацию, я не на знаю.
v-model:fefco="value" - это просто сокращение для :fefco="value" @update:fefco="value = $event"
Ты никаких событий не шлёшь($emit('update:fefco', newValue)), вот модель и "не работает".

И никаких withDirectives в приведённом коде я не вижу. Либо ты привёл не весь код, либо проблема в ином месте.

[Tereverda]

Aetae, если убрать v-model="selected" ошибка исчезает, он на самом деле и не очень нужен т.к не принимает атрибут value напрямую, а как задать начальное значение?