The usage of watch of vue

I'm working on an H5 project recently. The requirement is that the login button can be clicked only after the user has entered the mobile phone number and verification code.
Before using vueit, we may judge whether the user has entered content through inputthe event, and then modify the state of the button. changeNow that we have vueit, it saves a lot of trouble. We only need to monitor the value change of the data model in the watch.

<div id="app" class="login_area">
    <div class="form_line">
        <label>二次密码:</label>
        <input v-model="passw2" placeholder="请再次输入密码" />
    </div>
</div>
data: {
    passw2: '',  // 第二次 输入的密码
},
watch: {
    passw2: function(curVal,oldVal){
        console.log(curVal);
    },
},

But what if the listener is an object? A deep property is described in the
vue-watch documentation .

Discover changes in values ​​inside objects . So how do you actually do it?

<div id="app" class="login_area">
    <div class="form_line">
        <label>用户名:</label>
        <input v-model="info.name" placeholder="请输入用户名" />
    </div>
    <div class="form_line">
        <label>密码:</label>
        <input v-model="info.passw" placeholder="请输入密码" />
    </div>
</div>
var app = new Vue({
    el: '#app',
    data: {
        info: {
            name: '', // 用户名
            passw: '' // 密码
        },
    },
    watch: {
        info: {  // 这监听对象值的改变 和上面的不一样。
            handler(curVal,oldVal){
                console.log(curVal);
            },
            deep: true, 
        },
    },
})

Regarding watch, which is really useful in actual projects, we should note that there are some differences when monitoring properties and objects. This is also when I needed to monitor the object, I was stunned. I can't always write:

info.name: function(curVal,oldVal){
    console.log(curVal);
},

Later, after reading the documentation, I realized that there are deepoptions.