You can watch/listen for changes in an Alpine data variable, and run a function when a change happens.

You do so in the x-init attribute which contains code that’s run when Alpine is initialized.

For example I have some HTML that belongs to a modal, and any time this modal is opened I want to clear the name data, so the input field is always empty:

<div
  x-data="{ name: '' }"
  x-init="$watch('showModal', () => { name = '' })">
  <form>
    <input name="name" x-model="name" />
  </form>
</div>

Lessons in this unit: