$watch gets confused on nested properties

[ahmedkandel]

Sorry in advance, $watch has been just released and I was waiting for it. So I give it a try and found two points:

1. 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.

2. 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.

[ahmedkandel]

I am working on a draft PR that may fix those two issues. Hope it works.