Watch cannot listen properly after vue is extracted into components

watch in the vue component listens for changes to the formSearch, but if you modify the formSearch.memberPhone while listening, you can"t listen. There was no problem with writing it in the page before, but now it is extracted into a component

.
<template lang="pug">
div.vip-search-bar.flex.border-bottom
            Form.search-from(
                inline :label-width="60"
                :model="formSearch"
                ref="formSearch")
                div
                    FormItem(label="" )
                        Input.s-input(v-model="formSearch.memberSn"  placeholder="...")
                    FormItem(label="")
                        Input.s-input(v-model="formSearch.memberName" placeholder="...")
                    FormItem(label="" prop="memberPhone")
                        Input.s-input(
                            v-model="formSearch.memberPhone" placeholder="...")
                div
                    FormItem(label="")
                        DatePicker.datePicker.l-input(
                            placeholder="..."
                            :options="datePickerOption"
                            type="daterange"
                            v-model="formSearch.time")
            Button.btn-search(@click="search") 
</template>
<script>
export default {
    name: "VipSearch",
    data () {
        let _that = this
        return {
            formSearch: {}, // 
            // ,
            datePickerOption: {
                shortcuts: [
                    {
                        text: "",
                        value () { return     _that.getDatePickerData(7)    }
                    },
                    {
                        text: "",
                        value () { return     _that.getDatePickerData(30)    }
                    },
                    {
                        text: "",
                        value () { return     _that.getDatePickerData(90)    }
                    }
                ]
            }
            // 
            // searchRules: {
            //     memberPhone: [
            //         {validator: this.phoneCheck, trigger: "blur"}
            //     ]
            // },
        }
    },
    watch: {
        formSearch: {
            handler (nv, ov) {
                this.$nextTick(() => {
                    let num = parseInt((nv.memberPhone + "").replace(/[^\d]/g, ""))
                    if (isNaN(num)) {
                        this.formSearch.memberPhone = ""
                    } else {
                        this.formSearch.memberPhone = num
                    }
                })
            },
            deep: true
        }

    },
    methods: {
        search () {
            this.$refs.formSearch.validate(valid => {
                if (!valid) { return    }
                this.$emit("search", this.formSearch)
            })
        },
        getDatePickerData (day) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * day)
            return [start, end]
        }
    }
}
</script>

add corresponding attributes to formSearch


 FormItem(label="" prop="memberPhone")
Change

to

 FormItem(label="")

is that okay?

Menu