$watch gets confused on nested properties #279
Description
Sorry in advance, $watch has been just released and I was waiting for it. So I give it a try and found two points:
- When watching a property the callback gets fired regardless of the property parent e.g.
<div x-data="{ foo: 'bar', subObj: { foo: 'baz' } }" x-init="$watch('foo', value => console.log('$watch callback', value))">
<button x-on:click="foo = 'qux'">Change 'foo' property</button>
<button x-on:click="subObj.foo = 'quux'">Change 'subObj.foo' property</button>
</div>
$watch callback gets fired on both cases, While should be more spesific.
- There is no deep watching like in Vue.js, Maybe it is a future feature, I don't want to stress you out e.g.
<div x-data="{ items: ['foo', 'bar'] }" x-init="$watch('items', value => console.log('$watch callback', value))">
<ul>
<template x-for="item in items" :key="item">
<li x-text="item"></li>
</template>
</ul>
<button x-on:click="items.push('baz')">Add 'baz' to items</button>
</div>
$watch callback will not be fired when pushing to items array. The same thing if items is array of objects when changing a child object propery the callback is not fired.
Thanks.