title: Tracking input change in alpine.js
body: <p>I'm learning alpine.js and trying to capture the user input value.
  I have used &quot;x-on:input&quot; but its not calling the function</p>
  <p>Below is the simple form input</p>
  <pre><code> &lt;input type=&quot;email&quot; class=&quot;form-control&quot; x-on:input.debounce=&quot;validateEmail($event)&quot; x-model=&quot;userEmail&quot; id=&quot;email&quot; aria-describedby=&quot;emailHelp&quot; placeholder=&quot;Enter email&quot;&gt;
  </code></pre>
  <p>and this is the basic method in my index.js</p>
  <pre><code>function validateEmail(event){
  console.log(userEmail);
  
  }
  </code></pre>
  <p>The function is not getting called.</p>
  <p>Adding a sample <a href="https://stackblitz.com/edit/web-platform-alpinejs?file=index.html" rel="nofollow noreferrer">stackblitz</a></p>
  <p>Please Guide</p>
  <p>Thanks
  Shruti Nair</p>