Untitled

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine.js</title>
  <script defer src="https://unpkg.com/alpinejs@3/dist/cdn.min.js"></script>
 </head>
 <body>

<button class="increment">
  Увеличить <span class="result"></span>
</button>

<script>

  document.addEventListener('alpine:init', () => {
    let button = document.querySelector('button.increment');
    let span = document.querySelector('span.result');
    let data = Alpine.reactive({ count: 1 });

    let firstRun = false;

    Alpine.effect(() => {

      if (firstRun) {
        firstRun = true;

        alert("Effect запустился!");

        span.textContent = data.count;
      }

    });

    button.addEventListener('click', () => {
      data.count = data.count + 1;
    });
  });

</script>

 </body>
</html>