Vue.js 3 v-model doesnt work on select on production build

Question

I have the problem, that the v-model on an select input doesnt work anymore in the production build.

The code:

<script setup>
import BreezeGuestLayout from '@/Layouts/Guest.vue';
import {Head, Link} from '@inertiajs/inertia-vue3';

</script>
<template>
    <BreezeGuestLayout>

        <div class="m-4">
            <div class="d-flex align-items-center mb-8">
                <select v-model="selected_event">
                    <option
                        v-for="event_date in event_dates"
                        :value="event_date"
                    >
                        {{ event_date.weekday }}: {{ event_date.start_date }}, {{ event_date.select_text }}
                    </option>
                </select>
            </div>

            <h4 v-if="selected_event">
                Selected Event: {{ selected_event.select_text }} at {{ selected_event.start_date }}
            </h4>
        </div>
    </BreezeGuestLayout>
</template>

<script>

export default {
    name: "BookingIndex",
    data() {
        return {
            event_dates: [
                {
                    id: 1,
                    start_date: "2022-10-30",
                    weekday: "Sunday",
                    select_text: "Joes Birthday",
                },
                {
                    id: 1,
                    start_date: "2022-11-14",
                    weekday: "Monday",
                    select_text: "Wedding-Day",
                }
            ],
            selected_event: null,
        }
    }
}

</script>

And it works in the dev build (npm run dev), but not in the production build (npm run build).

In the dev-console of my browser it shows the following error:

Uncaught ReferenceError: selected_event is not defined
    at d.onUpdate:modelValue.n.<computed>.n.<computed> [as _assign] (Demo.816a5ac5.js:1:608)
    at HTMLSelectElement.<anonymous> (app.bb04c4f1.js:31:67729)

But I didn´t understand this error, because selected_events ist defined and at the dev build it works perfectly.

I use Laravel (version 9.19 for the backend) with inertia (version 0.5.4) and vue.js (version 3.2.31).

I hope someone can help me or give me some tips. If you need more information, please let me know.

Answer 1

After a long research session, I found a/the solution in the issues of the git repo from vuejs/core. (Thanks xcash)

I guess the problem is that the two script parts and compete and you have to choose one of them to use v-model.

Here is the link to the GitHub issue: https://github.com/vuejs/core/issues/5584#issuecomment-1228348819