JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
  <head>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
  </head>

  <body>
    <div x-data="example">
      <span x-text="count"></span>
      <button @click="increment">Increment</button>
      <button @click="toggleBool">Toggle bool</button>
    </div>

    <script>
      document.addEventListener('alpine:init', () => {
        let bool = Alpine.reactive({value: false});

        Alpine.data('example', () => ({
          count: 0,

          init() {
            Alpine.effect(() => {
              if (bool.value) {
                alert(`Count is: ${this.count}`);
              }
            });
          },

          increment() {
            this.count++;
          },

          toggleBool() {
            bool.value = !bool.value;
          },
        }));
      })
    </script>
  </body>
</html>