Vue深度监听失效：对象新增属性可触发，编辑已有属性不响应

你当前的监听器存在两处核心配置与响应式规则匹配的问题，直接导致了监听行为异常：

• 深度监听的配置位置完全错误
  Vue中watch的deep是单个被监听属性的专属配置项，并非全局通用配置。你当前把deep: true写在watch对象的顶层，根本不会作用到customer的监听逻辑上——相当于给customer配置了默认的浅监听模式，只有当customer对象的整体引用被替换时，回调才会触发，对象内部属性的变化完全不会被监听到。
  你观察到的「首次输入新增键时触发监听」的现象，本质上是初始空对象在新增首个键时，对象本身的结构标记被浅监听偶发捕捉的异常表现，并非深度监听生效的正常状态。
• 动态新增的对象属性天生不具备响应式追踪能力（Vue2环境下）
  Vue2的响应式系统是在组件初始化时，通过Object.defineProperty遍历data属性完成依赖收集的。你初始把customer定义为空对象{}，后续模板里通过v-model绑定的customer.email、customer.street_1等键，都是组件初始化完成后才动态新增的，这些键从一开始就没有被响应式系统拦截追踪，即便开启了深度监听，这些新增键的变化也不会稳定触发回调。

1. 调整深度监听的配置位置 #

错误写法参考：

// 错误配置：deep位于watch顶层，完全无效
watch: {
  customer(newData) {
    console.log("test", newData)
  },
  deep: true // 这行代码本质是在监听一个不存在的名为deep的属性
}

正确写法需要把deep配置和回调绑定在同一个监听项下：

// 正确配置：deep属于customer监听器的内嵌配置
watch: {
  customer: {
    // 原有的监听回调作为handler属性传入
    handler(newData) {
      console.log("test", newData)
    },
    // 开启对customer内部所有属性的深度追踪
    deep: true
  }
}

2. 提前初始化所有用到的customer属性 #

为了让Vue2的响应式系统在组件初始化时就完成所有属性的依赖收集，你需要在data中把模板绑定用到的所有customer键提前赋值初始值（一般为空字符串），避免等用户输入时才动态新增非响应式键：

data() {
  return {
    customer: {
      // 提前初始化所有模板绑定的属性
      email: "",
      first: "",
      last: "",
      street_1: "",
      street_2: ""
    }
  }
}

如果确实需要在业务逻辑中动态新增属性、不想提前初始化，也可以通过this.$set方法为customer赋值，保证新增的属性被响应式系统追踪：

// 动态新增可响应的address属性示例
this.$set(this.customer, "address", "北京市朝阳区")

完成上述调整后：

• 首次输入时给customer填充属性值
• 后续修改customer上已存在的任意属性值
  两类场景都会正常触发监听回调，不会再出现修改已存在键值无响应的问题。

内容的提问来源于stack exchange，提问作者HayleeGal58