Soy nuevo en AlpineJS y mientras lo aprendía y lo implementaba en mi proyecto, encontré algo extraño que no puedo resolver por mi cuenta. Tengo una plantilla de 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> }}> </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>

El problema es que cuando hago clic en mi img recibo dos alertas (ambas son iguales, no es un problema ya que en el backend aún no he implementado un punto final). Intenté mirar los documentos de AlpineJS, intenté usar .stop y .prevent , lo intenté incluso sin form . Y el resultado siempre fue el mismo :(

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

¿Qué podría ser un problema aquí? Gracias