I am wondering why this html / alpinejs is generating multiple console log entries when the button is clicked.
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{ }">
<button @click="console.log('Click!')">Click it!</button>
</div>According to the Alpine.js docs you are missing the defer attribute when adding the script. Adding that in will solve your problem.
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{ }">
<button @click="console.log('Click!')">Click it!</button>
</div>