support for `$watch`-ing any property on a vm

I’m trying to subscribe to any data changes made against any property on the vm, not just pre-defined property names. I couldn’t find any way to do it, so here’s my proposal.

I made an example here: http://jsfiddle.net/BBk3j/. In the first $watch, I subscribe to changes on the foo property. The next two $watch statements would be my proposal to allow any watching for updates on any property. Either support a wildcard syntax (which I don’t think is a great idea, because * is a valid property name in JS), or a better syntax that makes the string property name optional.

[happilymarrieddad]

this is how you do it with components… Thanks to usmanhalalit

watch:{
    '$data': {
        handler:function() {
            console.log('changed')
        },
        deep:true
    }
},

My next question is how do I tell what changed?? like which variable??

When I console.log out the first argu I get the whole data object… which makes sense but is there a way to tell what specifically changed?

[NoelDavies]

as mentioned by @guitcastro this still doesn’t mention how to watch an item within a list.

Say I have a list like so

```
data: {
    items: [
        {name: 'a', quantity: 2},
        {name: 'b', quantity: 2},
        {name: 'c', quantity: 2}
    ]
}
```

If I do a watch on this using

```
watch: {
    'items': {
        handler: function (value, mutation) {
        },
        deep: true
    }
}
```

How will I know what item has been mutated / changed?

This is the issue I, nor guys on my livestream can work out.