SOURCE

var vm = new Vue({
    el: "#app",
    data: {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: {
            f: {
                g: 5
            }
        },
        h: [6,7,8]
    },
    computed: {
        i: function () {
            return this.a * 2
        }
    },
    watch: {
        // key: porp | obj.prop | arr[idx] | computed
        a: 'setA',
        // e: 'setA',
        'e.f.g': function () {alert('e.f.g')},
        e: {
            handler: function() {alert('e.f.g deep')},
            deep: true
        },
        'h[1]': 'setA',
        i: function (newVal, oldVal) { alert('computed is changed') },

        // value: String | Function | Object | Array
        b: function (newVal, oldVal) {
            console.log('new: %s, old %s', newVal, oldVal)
        },
        c: {
            // handler is neccessary, deep and immediate are selectable
            handler: function (newVal, oldVal) { 
                alert('handler:newVal:' + newVal + ',oldVal:' +oldVal) },
            deep: true,
            immediate: true,
        },
        d: [
            function handle1(newVal, oldVal) { 
            	alert('chage d alert 1')
            },
            {
                handler: function (newVal, oldVal) { 
            		alert('chage d alert 2')
            	},
                deep: true,
            },
        ],
    },
    methods: {
        setA: function (newVal, oldVal) {
            alert('watch with data by method')
        },
        changeA() {
            this.a = 888
        },
        changeB() {
            this.b = 888
        },
        changeC() {
            this.c = 888
        },
        changeD() {
            this.d = 888
        },
        changeEFG() {
            this.e.f.g = 888
        },
        changeE() {
            this.e = 888
        },
        changeH1() {
            this.h[1] = 888
        },
    }
})

<div id="app">
    <div>a: {{ a }}</div>
    <div>b: {{ b }}</div>
    <div>c: {{ c }}</div>
    <div>d: {{ d }}</div>
    <div>e.f.g: {{ e.f.g }}</div>
    <!-- 监听数据项无用 -->
    <div>h[]: {{ h }}</div>
    <div>computed: {{ i }}</div>
    <hr />
    <button @click="changeA">change a</button>
    <button @click="changeB">change b</button>
    <button @click="changeC">change c</button>
    <button @click="changeD">change d</button>
    <button @click="changeEFG">change e.f.g</button>
    <button @click="changeE">change e</button>
    <button @click="changeH1">change h[1]</button>
    <button @click="changeComputedi">change computed i</button>
</div>