After placing it inside a "Label" tag, the year and month selection malfunctions.

[Opshell]

Describe the bug

When I place the "VueDatePicker" inside a "Label" tag,
issues arise with the selection of the year and month.
After making a selection, the year and month do not update,
and the date picker automatically closes.

Tests Conducted

1. Conducted a test using "updateMonthYear," and it successfully displays the selected year and month.
2. Conducted a test using "handleInvalid," and no errors were reported.
3. Functions normally when not within a "Label" tag.

To Reproduce

Steps to reproduce the behavior:

1. declare component

<script setup lang="ts">
    import { ref } from 'vue';

    import { str } from '@/hooks/opshellLibary';

    import VueDatePicker from '@vuepic/vue-datepicker';
    import type { DatePickerInstance } from "@vuepic/vue-datepicker"
    import '@vuepic/vue-datepicker/dist/main.css'

    const datepicker = ref<DatePickerInstance>(null);

    const date = ref(new Date());
    const format = (date: Date) => {
        const year = date.getFullYear();
        const month = str.strPad((date.getMonth() + 1).toString(), 2, '0');
        const day = str.strPad(date.getDate().toString(), 2, '0');

        return `${year}-${month}-${day}`;
    };

    const dateClicked = (date: Date) => {
        console.log(`Selected：${date}`);
    }
    const updateMonthYear = (date: {
        instance: number,
        month: number,
        year: number
    }) => {
        console.log('updateMonthYear：', date);

        datepicker.value?.setMonthYear(date);
    };
    const handleInvalid = (date) => {
        console.error('Invalid date selected：', date);
    }
</script>

<template>
    <VueDatePicker
        v-model="date"
        class="vueDatePicker"
        :format="format"
        :day-names="['一', '二', '三', '四', '五', '六', '日']"
        :hide-navigation="['time']"

        input-class-name="datePickerInput"
        menu-class-name="pickerBlock"
        calendar-cell-class-name="day"

        locale="tw"
        auto-apply

        @date-update="dateClicked"
        @update-month-year="updateMonthYear"
        @invalid-select="handleInvalid"
    >
        <template #input-icon>
            <ElSvgIcon class="calendarIcon" name="calendar_month"/>
        </template>

        <template #clear-icon="{ clear }">
            <ElSvgIcon class="clearIcon" name="delete_forever" @click="clear"/>
        </template>
    </VueDatePicker>
</template>

2. Place the component inside a "Label" tag

<label>
    <MoleDatePicker v-model="tempData.birth"></MoleDatePicker>
</label>

3. Selecting the year or month.
   
4. See error

Desktop & Mobile (please complete the following information):

• Browser [Edge 119]
• Library version [7.2]

[Jasenkoo]

Should be ok with the new release

[Opshell]

Maybe not ! ! !
This problem still exists in 7.2.2,
This is still the case when I test it in a clean environment!
This only happens in Label tags,
Could you please test it again?
Grateful!!

[Guito]

@Jasenkoo this is still not working in 8.6.0

[Jasenkoo]

@Guito @Opshell , will include a patch in the next release, in the meantime, just add for="" on label tag, that should resolve it