i'm new to AlpineJS and while learning it and implementing into my project, i found something bizarre that i can't resolve on my own. I have a Blade template that looks like this:

<form action="<some_url>" method="POST" style="display: contents">
@csrf
<button tabindex="-1" type="submit" class="focus:animate-ping w-full md:w-1/2 block hover:bg-gray-50 rounded-2xl">
    <img class="object-cover w-full h-full rounded-lg max-h-64 sm:max-h-96" src={{ <some_url> }}>
</button>

{{--img below is causing issues!--}}
<img x-data="{
        id: '{{ <some_hash_id> }}',
        _token: <csrf-token>
    }"
    @click="fetch('/bookmark', {method: 'POST',body: JSON.stringify(id)}).then(response => {
        if (response.ok)
            alert('Test - ok')
        else
            alert(`Test - problem`)
        })" 
    class="m-4 self-start" src="<some_img_url>">
    <input type="hidden" name="token2" value="{{ <another_token> }}">
</form>

The problem is that when i click on my img i get two alerts (both are the same, it's not a problem as on backend i haven't yet implemented an endpoint). I tried looking at AlpineJS docs, i tried using .stop and .prevent, i tried even without form. And result was always the same :(

All the time npm run watch is running and i'm always reloading the page with "empty cache" to make sure cache won't mess with it.

What might be a problem here? Thanks