[Vue] component watch props attribute value

#HTML
<div id="example">
  <p>
    <child :msg="msg"></child>
  </p>
  <p>
    <button @click='props'>改变props</button>
  </p>
</div>

#JS
Vue.component('child', {
  props: ['msg'],
  computed: {
    value:{
      get:function(){
        return this.msg
      },
      set:function(value){
        this.msg = value;
      }
    }
  },
  watch:{
      msg: function (val,oldval){
       this .value='Change child component msg' ;
    }
  },
  template: '<span>{{ value }}</span>'
})

var vm= new Vue({
    the: '#example' ,
  data:function(){
      return{
        msg: 'default child component msg'
    }
  },
  methods:{
        props:function(){
        this.$set('msg','2');
    }
  }
})

Code: https://jsfiddle.net/kakarrot2009/ebeqhr6x/