[Bug]: Setting date picker's model value to undefined doesn't reset field's segments

[DamianGlowala]

Environment

Radix Vue version: 1.9.9

Link to minimal reproduction

<template>
    <div class="p-8">
        <div class="flex flex-col gap-2">
            <Label
                class="text-white text-sm"
                for="date-field"
            >
                Birthday
            </Label>
            <DatePickerRoot
                id="date-field"
                v-model="modelValue"
            >
                <DatePickerField
                    v-slot="{ segments }"
                    class="flex w-40 select-none items-center justify-between rounded-lg border border-transparent bg-white p-1 text-center data-[invalid]:border-red-500"
                >
                    <div class="flex items-center">
                        <template
                            v-for="item in segments"
                            :key="item.part"
                        >
                            <DatePickerInput
                                v-if="item.part === 'literal'"
                                :part="item.part"
                            >
                                {{ item.value }}
                            </DatePickerInput>
                            <DatePickerInput
                                v-else
                                :part="item.part"
                                class="rounded-md p-0.5 data-[placeholder]:text-gray-400 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none "
                            >
                                {{ item.value }}
                            </DatePickerInput>
                        </template>
                    </div>

                    <DatePickerTrigger class="rounded-md p-1 text-xl focus:shadow-[0_0_0_2px] focus:shadow-black">
                        calicon
                    </DatePickerTrigger>
                </DatePickerField>

                <DatePickerContent
                    :side-offset="4"
                    class="will-change-[transform,opacity]] rounded-xl bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]"
                >
                    <DatePickerArrow class="fill-white" />
                    <DatePickerCalendar
                        v-slot="{ weekDays, grid }"
                        class="p-4"
                    >
                        <DatePickerHeader class="flex items-center justify-between">
                            <DatePickerPrev
                                class="inline-flex size-8 cursor-pointer items-center justify-center rounded-[9px] bg-transparent text-black hover:bg-black hover:text-white focus:shadow-[0_0_0_2px] focus:shadow-black active:scale-95 active:transition-all"
                            >
                                {{ '<' }}
                            </DatePickerPrev>

                            <DatePickerHeading class="font-medium text-black" />
                            <DatePickerNext
                                class="inline-flex size-8 cursor-pointer items-center justify-center rounded-[9px] bg-transparent text-black hover:bg-black hover:text-white focus:shadow-[0_0_0_2px] focus:shadow-black active:scale-95 active:transition-all"
                            >
                                >
                            </DatePickerNext>
                        </DatePickerHeader>
                        <div
                            class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
                        >
                            <DatePickerGrid
                                v-for="month in grid"
                                :key="month.value.toString()"
                                class="w-full border-collapse select-none space-y-1"
                            >
                                <DatePickerGridHead>
                                    <DatePickerGridRow class="mb-1 flex w-full justify-between">
                                        <DatePickerHeadCell
                                            v-for="day in weekDays"
                                            :key="day"
                                            class="w-8 rounded-md text-xs"
                                        >
                                            {{ day }}
                                        </DatePickerHeadCell>
                                    </DatePickerGridRow>
                                </DatePickerGridHead>
                                <DatePickerGridBody>
                                    <DatePickerGridRow
                                        v-for="(weekDates, index) in month.rows"
                                        :key="`weekDate-${index}`"
                                        class="flex w-full"
                                    >
                                        <DatePickerCell
                                            v-for="weekDate in weekDates"
                                            :key="weekDate.toString()"
                                            :date="weekDate"
                                        >
                                            <DatePickerCellTrigger
                                                :day="weekDate"
                                                :month="month.value"
                                                class="relative flex size-8 items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent font-normal text-black outline-none text-sm before:absolute before:top-[5px] before:hidden before:size-1 before:rounded-full before:bg-white data-[unavailable]:pointer-events-none data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through data-[today]:before:block data-[selected]:before:bg-white hover:border-black focus:shadow-[0_0_0_2px] focus:shadow-black"
                                            />
                                        </DatePickerCell>
                                    </DatePickerGridRow>
                                </DatePickerGridBody>
                            </DatePickerGrid>
                        </div>
                    </DatePickerCalendar>
                </DatePickerContent>
            </DatePickerRoot>
        </div>

        <p class="text-white">
            Model value: {{ modelValue }}
        </p>

        <button
            class="text-white"
            @click="modelValue = undefined"
        >
            RESET
        </button>
    </div>
</template>

<script lang="ts" setup>
const modelValue = ref(undefined)
</script>

Steps to reproduce

1. Enter a date into the date picker field.
2. Change the binded model value to undefined.
3. Observe how date picker field's segments remain unchanged.

Describe the bug

Nagrywanie.2024-11-15.180444.mp4

Expected behavior

Date picker field's segments are reset when model value changes to undefined.

Context & Screenshots (if applicable)

No response