Alpine.js how to watch for changes for radio button

You can x-model the radio value, then watch for changes to the value, and then do something. In this case, just console.log

<div x-data="{pet: ''}" x-init="$watch('pet', value => console.log(value))">
  <input type="radio" id="cat" value="cat" x-model="pet">
  <input type="radio" id="dog" value="dog" x-model="pet">
  <p>Pet: <span x-text="pet"></span></p>
</div>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div x-data="{pet: ''}" x-init="$watch('pet', value => console.log(value))">
  <input type="radio" id="cat" value="cat" x-model="pet">
  <input type="radio" id="dog" value="dog" x-model="pet">
  <p>Pet: <span x-text="pet"></span></p>
</div>

I think you have a typo on your HTML tag. It should be "onchange" and not ":change".

As you have not provided your onPetChange function, I do not know if it could be also a problem for you. Have you got that function in place?

Anyways here it is a script that prints on your console "hello world" when you select the first radio button.

Try with:

<input type="radio" id="cat" :change="console.log('Hello World!')" name="pet" value="cat">
<input type="radio" id="dog" onchange="onPetChange('pet', 'dog')"  name="pet" value="dog">

If you provide us also your onPetChange function I can have a look on it to check if there is something wrong with it too.

This works perfect:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div x-data="{res: ''}">
<input type="radio" id="cat" @change="console.log(res)" name="pet" value="cat" x-model="res">
<label for="cat">Cat</label><br>
<input type="radio" id="dog" @change="console.log(res)"  name="pet" value="dog"  x-model="res">
<label for="dog">Dog</label><br>
<p x-text="res"></p>
</div>