vue组件props属性监听不到值变化问题

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

props: {
  province: String, // 省
  city: String, // 市
  area: String // 区
},
computed: {
  address(){
    return `${this.province}${this.city}${this.area}`
  }
}

watch: {
   msg(newV,oldV) {
     // do something
     console.log(newV,oldV)
   } 
}

  props:{
    config:Object
  },
  computed: {
      isShow() { 
          return this.config.role.isShow
      }
  },
  watch: {
      isShow(newV,oldV) {
          // do something
          console.log(newV,oldV)
      }
  }

 props:{
    config:Object
  },
  watch: {
    isShow:{ //深度监听，可监听到对象、数组的变化
        handler (newV, oldV) {
          // do something, 可使用this
          console.log(newV,oldV)
        },
        deep:true
       }
  },

props:{
    option:Object
  },
  watch:{
    'option.text'(newVal,oldVal){
          console.log(newVal,oldVal);
    }
}