Untitled

<!DOCTYPE html>
<html lang="ru">
 <head>
  <title>Alpine.js</title>
  <script defer src="https://unpkg.com/alpinejs@3/dist/cdn.min.js"></script>
 </head>
 <body>

<button id="increment">Увеличить count</button> count = <span id="count">0</span><br>
<button id="toggle_printing_count">Count в коллбэке: <span id="toggle_detail"><b>не печатается</b></span>, переключить</button><br>
<button id="force_run">Форсировать выполнение коллбэка</button>

<script>
  document.addEventListener('alpine:init', () => {
    let data = Alpine.reactive({ count: 0 });
    let force_run = Alpine.reactive({ count: 0 });
    let print_count = false;

    Alpine.effect(() => {
      if (print_count) {
        alert("Ветка print_count!");
        document.querySelector('#count').textContent = data.count;
      }
      if (force_run.count) ;
    });

    document.querySelector('#increment').addEventListener('click', () => {
      data.count++;
    });

    document.querySelector('#toggle_printing_count').addEventListener('click', () => {
      print_count = !print_count;
      document.querySelector('#toggle_detail').innerHTML = print_count ? "<b>печатается</b>" : "<b>не печатается</b>";
    });

    document.querySelector('#force_run').addEventListener('click', () => {
      force_run.count++;
    });
  });
</script>

 </body>
</html>