Alpine Expression Error

Hello everyone, I need a reset() method to clear the detepicker. I get an error Uncaught ReferenceError: reset is not defined Can you advise me what I'm doing wrong? THX

@props(['name' => '', 'placeholder' => ''])
<input x-data="datepicker(@js($getConfig()))" x-ref="datePicker" type="text" x-modelable="value" x-bind:id="$id('input')"
    placeholder="{{ $placeholder ? $placeholder : 'DD-MM-YYYY' }}" name="{{ $name }}" {{ $attributes }}
    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">

    <span
        x-on:click="reset()"
        class="cursor-pointer text-indigo-500 hover:text-indigo-600"
    >reset
</span>

@once
    <script>
        document.addEventListener("alpine:init", () => {
            Alpine.data('datepicker', (config) => ({
                value: null,
                init() {
                    flatpickr(this.$refs.datePicker, config).config.onChange.push(
                        function(selectedDates, dateStr, instance) {
                            this.value = dateStr;
                        }
                    );
                },
                reset() {
                    console.log('reset');
                }
            }));
        });
    </script>
@endonce