I have 2 weird @entangle issues.

Hi there. I'm not a master in alpine but to me it seems that @entangle is quite a buggy directive. I'm facing to issues in two seperate files. the first one is that on my date picker entangle makes only one round trip to the server. and no subsequet xhr is fired. Here is the view.

<div
x-data="{
    value: @entangle('date'),
    init() {
        let picker = flatpickr(this.$refs.picker, {
            mode: 'single',
            dateFormat: 'Y/m/d H:i',
            enableTime: true,
            defaultDate: this.value,
            onChange: (date, dateString) => {
                this.value = dateString
            }
        })

        this.$watch('value', () => picker.setDate(this.value))
    },
}"
    >

       <span>Due </span><span x-ref="picker" class="text-[#2780A8]">{{ $task->due_at->diffForHumans() }}</span>
</div>

And here is the class.

    public function updatedDate()
    {
        $task = $this->task;
        $task->due_at = $this->date;
        $task->save();
    }

And the second issue I'm endountering with entangle is that in a toggle switch (created with alpine headless ui) the toggle doesnt do the first render which means that toggles will always be false on page load, even if the property in livewire is true. Here is the view

  <div x-data="{ value: @entangle('profile.mention_email')}" x-switch:group class="flex gap-x-2">
                        <!-- toggle button -->
                        <div>
                            <!-- Button -->
                            <button x-switch x-model="value" :class="$switch.isChecked ? 'bg-[#2780A8]' : 'bg-[#E3E6EA]'" class="relative inline-flex w-14 p-[2px] rounded-full transition focus:outline-none">
                                <span :class="$switch.isChecked ? 'translate-x-8' : 'translate-x-0'" class="bg-white h-5 w-5 rounded-full transition shadow-md">
                                </span>
                            </button>
                        </div>
                        <div x-switch:label class="space-y-1">
                            <h3 class="font-poppins text-sm text-[#585A65] font-semibold">
                                Recive an email every time someone mentio you
                            </h3>
                            <p class="font-poppins text-[13px] text-[#585A65]">
                                This will make that you never miss out
                            </p>
                        </div>
                    </div>

And here si the class.

public $profile;
    protected $rules = [
        'profile.mention_email' => 'boolean',
        'profile.due_email' => 'boolean',
        'profile.direct_message_email' => 'boolean',
        'profile.mention_push' => 'boolean',
        'profile.due_push' => 'boolean',
        'profile.direct_message_push' => 'boolean',
    ];
    public function mount()
    {
        $this->profile = auth()->user()->profile;
    }
    public function updatedProfile()
    {
        $this->validate();
        $this->profile->save();
    }

One of this issues I already asked recently on the forum here but I got no answers (it might have been unclear to understand)