AlpineJS on-click se ejecuta dos veces

Soy nuevo en AlpineJS y, mientras lo aprendo e implemento en mi proyecto, encontré algo extraño que no puedo resolver por mi cuenta. Tengo una plantilla Blade que se ve así:

<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>}}>
    </some_url></button>

    {{-- ¡La siguiente imagen está causando problemas! --}}
    <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 - problema`)
        })" class="m-4 self-start" src="<some_img_url>">
    <input type="hidden" name="token2" value="{{<another_token>}}">
</form>

El problema es que cuando hago clic en mi imagen, obtengo dos alertas (ambas son iguales, no es un problema ya que en el backend aún no he implementado un punto final). Intenté buscar en la documentación de AlpineJS, intenté usar .stop y .prevent, incluso intenté sin el form. Y el resultado siempre fue el mismo 🙁

Todo el tiempo está ejecutando npm run watch y siempre estoy recargando la página con “caché vacío” para asegurarme de que la caché no afecte.

¿Cuál podría ser el problema aquí? Gracias.