Flatpickr wrapped with Alpine.js in blade component for Laravel Livewire

datepicker.blade.php

<div x-data="datepicker(@entangle($attributes->wire('model')))" class="relative">
    <div class="flex flex-col">
        <label>Date</label>
        <div class="flex items-center gap-2">
            <input type="text" x-ref="myDatepicker" x-model="value">
            <span class="cursor-pointer underline" x-on:click="reset">
                <x-icon.x></x-icon.x>
            </span>
        </div>
    </div>
</div>

@once
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('datepicker', (model) => ({
                value: model,
                init(){
                    this.pickr = flatpickr(this.$refs.myDatepicker, {})

                    this.$watch('value', function(newValue){
                        this.pickr.setDate(newValue);
                    }.bind(this));
                },
                reset(){
                    this.value = null;
                }
            }))
        })
    </script>
@endonce

event-form.blade.php

<div class="bg-dark">
    <div class="grid place-items-center min-h-screen">
        <div class="shadow rounded p-4 border bg-white  h-[278px] flex flex-col gap-4">
            <h1 class="text-xl font-semibold text-gray-700">Event form</h1>
            <div class="space-y-4">

                <x-datepicker label="Starts at" wire:model="event.starts_at">

                </x-datepicker>

                <x-datepicker label="Ends at" wire:model="event.ends_at">

                </x-datepicker>

            </div>
            <div>
                <button
                    class="bg-success-500 text-white px-2 py-1 rounded"
                    wire:click="startToday()"
                >
                    Start Today
                </button>
            </div>
        </div>
    </div>
</div>

EventForm.php

<?php

namespace App\Http\Livewire;

use App\Models\Event;
use Livewire\Component;

class EventForm extends Component
{
    public $event;

    public function rules()
    {
        return [
            'event.starts_at' => ['required'],
            'event.ends_at' => ['required'],
        ];
    }

    public function mount()
    {
        $this->event = Event::make();
    }

    public function startToday()
    {
        $this->event->starts_at = today()->format('Y-m-d');
        $this->event->ends_at = today()->format('Y-m-d');
    }

    public function render()
    {
        return view('livewire.event-form');
    }
}

I've run into an issue with multiple datepickers on the same page - they both preload with the same value when the component properties both have an existing values. I think it's something to do with the x-model being the same (x-model="value") for both datepickers.

I've spent hours trying to solve this with my very limited alpine skills :(

<div wire:ignore x-data="datepicker(@entangle($attributes->wire('model')))" class="relative">    
    <x-input class="mt-1 block w-full" x-ref="myDatepicker" x-model="value" id="{{ rand() }}" />    
</div>

@once
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('datepicker', (model) => ({
                value: model,
                init(){
                    this.pickr = flatpickr(this.$refs.myDatepicker, {dateFormat:'d/m/Y'})

                    this.$watch('value', function(newValue){
                        this.pickr.setDate(newValue);
                    }.bind(this));
                },
                reset(){
                    this.value = null;
                }
            }))
        })
    </script>
@endonce

<div class="mb-5" wire:ignore>        
    <x-label value="Date" />
    <x-datepicker wire:model="date" />
    <x-input-error for="date" class="mt-2" />
</div>  

<div class="mb-5" wire:ignore>        
    <x-label value="Today" />
    <x-datepicker wire:model="today" />
    <x-input-error for="today" class="mt-2" />
</div>