Vue 2.6下监控data下对象变量方法小计，以实现省市区联动为例（部分代码）

var app = new Vue({
 el: '#app',
  data: {
	  id: '',
	  del_id: '',
	  is_create: '0',
	  error:'',
	  del_error:'',
	  provinceList: '',
	  cityList: '',
	  countyList: '',
	  model:{
		  name: '',
		  mobile:'',
		  province_id :'',
		  city_id :'',
		  county_id :'',
		  address :'',
		  title :'',
		  detail :'',
		  post_code :'',
	  }
  },
  methods: {
    test: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      //alert('Hello ' + this.name + '!')
      if (event) {
        alert(event.target.tagName);
      }
    },
    getProvinceList: function () {
    	axios.get('/common/provinces.html').then(
    			res => {
    				this.provinceList=res.data;
    			}
    		)
        .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    getCityList: function (id) {
    	axios.get('/common/cities.html?province_id='+id).then(
    			res => {
    				this.cityList=res.data;
    			}
    		)
        .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    getCountyList: function (id) {
    	axios.get('/common/counties.html?city_id='+id).then(
    			res => {
    				this.countyList=res.data;
    			}
    		)
        .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    
    edit(id){
    	console.log('id:' + id);
    	this.is_create = '0';
    	axios.get('/express_address/edit.html?id='+ id).then(
   			res => {
  					this.error = '';
  					this.id = res.data.id;
  					this.model.name = res.data.name;
  					this.model.mobile=res.data.mobile;
  					this.model.province_id=res.data.province_id,
  					this.model.city_id=res.data.city_id;
  					this.model.county_id=res.data.county_id;
  					this.model.address=res.data.address;
  					this.model.title=res.data.title,
  					this.model.detail=res.data.detail;
  					this.model.post_code=res.data.post_code;
  					$('#myModal').modal("show");
   			}
   		)
        .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    	
    },
    update(){
    	if(this.is_create === '1'){
	    	axios.post('/express_address/save.html',this.model,{headers: {}}).then(
    			res => (
    				(res.data.code === 0)?(
    					$('#myModal').modal("hide"),
	    				location.reload(true)
    				)
    				:
    				(
    					this.error = res.data.message
    				)
    			)
    				
    		)
	        .catch(function (error) { // 请求失败处理
	            console.log(error);
	          });
    	}
    	else{
    		axios.post('/express_address/update.html?id=' + this.id,this.model).then(
   				res => (
	    				(res.data.code === 0)?(
	    					$('#myModal').modal("hide"),
		    				location.reload(true)
	    				)
	    				:
	    				(
	    					this.error = res.data.message
	    				)
	    			)
	    		)
	        .catch(function (error) { // 请求失败处理
	            console.log(error);
	          });
    	}
    	
    },
    createSender(){
    	this.is_create= '1';
    	this.error = '';
		this.id = '';
		this.model.name ='';
		this.model.mobile= '';
		this.model.province_id='',
		this.model.city_id='';
		this.model.county_id='';
		this.model.address='';
		this.model.title='',
		this.model.detail='';
		this.model.post_code='';
		$('#myModal').modal("show");
    },
    confirmDel(id){
    	this.del_id = id;
    	this.del_error = '';
		$('#delModal').modal("show");
    },
    del(id){
    	console.log('del id:'+ this.del_id);
    	this.del_error = '';
    	axios.get('/express_address/delete.html?id='+ this.del_id).then(
   			res => 
   			(res.data.code === 0)?(
   					this.del_id = '',
    				$('#delModal').modal("hide"),
    				location.reload(true)
   				)
   				:
   				(
   					this.del_error = res.data.message
   				)
   		)
        .catch(function (error) { // 请求失败处理
            console.log(error);
        });
    },
  },
  computed: {
		watchChange() {
			const { model:{mobile, name,address,province_id, city_id,county_id}} = this;
			return { model:{mobile, name,address,province_id, city_id,county_id }};
		},
		provinceChange() {
			const { model:{province_id,mobile}} = this;
			return {province_id};
		},
		cityChange() {
			const { model:{city_id}} = this;
			return {city_id};
		},
		
	},
  watch: {
       //监听内容
       watchChange(newData) {
    	 //清空警告信息
         this.error = '';
      },
      provinceChange(newData) {
    	  console.log(newData);
		  this.getCityList(newData.province_id);
		  this.countyList = '';//清空地区
      },
      cityChange(newData) {
    	  console.log(newData);
    	  this.getCountyList(newData.city_id);
      },
    }
});
app.getProvinceList();