<div x-data="{ state: '', initializeWatcher() { 
    this.$watch('state', value => { 
        console.log(`State changed to: ${value}`); 
    }); 
} }" x-init="initializeWatcher()">
    <!-- Content -->
</div>

<div x-data="{ name: '', initializeWatcher() { 
    this.$watch('name', value => { 
        console.log(`Name changed to: ${value}`); 
    }); 
} }" x-init="initializeWatcher()">
    <label for="name">Name:</label>
    <input type="text" id="name" x-model="name" placeholder="Enter your name">
</div>

<div x-data="{ counter: 0, logChange(value) { 
    console.log(`Counter updated to: ${value}`); 
}, initializeWatcher() { 
    this.$watch('counter', this.logChange); 
} }" x-init="initializeWatcher()">
    <p>Counter: <span x-text="counter"></span></p>
    <button @click="counter++">Increment</button>
</div>

<div x-data="{ user: { name: '', age: 0 }, initializeWatcher() { 
    this.$watch('user', value => { 
        console.log(`User updated: Name = ${value.name}, Age = ${value.age}`); 
    }); 
} }" x-init="initializeWatcher()">
    <label for="name">Name:</label>
    <input type="text" id="name" x-model="user.name" placeholder="Enter name">
    <label for="age">Age:</label>
    <input type="number" id="age" x-model="user.age" placeholder="Enter age">
</div>

<div x-data="{ settings: { theme: { color: 'light' } }, initializeWatcher() { 
    this.$watch('settings.theme.color', value => { 
        console.log(`Theme color changed to: ${value}`); 
    }); 
} }" x-init="initializeWatcher()">
    <label for="color">Theme Color:</label>
    <select id="color" x-model="settings.theme.color">
        <option value="light">Light</option>
        <option value="dark">Dark</option>
    </select>
</div>

<div x-data="{ query: '', results: [], fetchResults(query) { 
    fetch(`https://jsonplaceholder.typicode.com/posts?title_like=${query}`)
        .then(response => response.json())
        .then(data => { 
            this.results = data; 
        }); 
}, initializeWatcher() { 
    this.$watch('query', value => { 
        if (value.length > 2) this.fetchResults(value); 
    }); 
} }" x-init="initializeWatcher()">
    <label for="query">Search:</label>
    <input type="text" id="query" x-model="query" placeholder="Search posts...">
    <ul>
        <template x-for="result in results" :key="result.id">
            <li x-text="result.title"></li>
        </template>
    </ul>
</div>