v-model绑定对象检测不到属性变化？

v-model绑定

v-model大家都知道绑定的是数据源，可以把数据的变化更新到页面上，但是昨天我却遇到了这个问题。看代码

 <!-- html代码 -->
<el-col :span="12">
         <el-form-item :label="$t('accountSubjectInfo.countriesCode')">
                    <el-select v-model="selectValue" value-key="id" style="width: 100%;">
                           <el-option v-for="i in country" :key="i.id" :label="i.name + ' +' + i.code" :value="i"></el-option>
                     </el-select>
         </el-form-item>
 </el-col>

export default {
	data() {
		selectValue: {}
	},
	computed: {
        ...mapGetters(['country'])
    },
	methods: {
        fetch() {
            this.requestLoading = true;
            getInfo({})
                .then(res => {
                    const {state, msg, result} = res.data;
                    if (state) {
                        this.formData.list = result;
                        this.formData.list.idType1 = this.formData.list.idType === 1 ? '个人' : '公司';
                        this.selectValue = {code: this.formData.list.telArea, id: this.formData.list.telCountryCode};
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(err => {
                    this.$message({message: err.message, type: 'error'});
                })
                .finally(() => {
                    this.requestLoading = false;
                });
        },
    }
}

此时是对的，但是如果把fetch方法中==this.selectValue = {code: this.formData.list.telArea, id: this.formData.list.telCountryCode};==改成this.selectValue.code = this.formData.list.telArea;
this.selectValue.id = this.formData.list.telCountryCode;

看似这样的变化不会对页面造成影响，但是就会出现这样的不好效果，页面刷新第一次的时候，打印selectValue中有值id，code存在，并且页面会显示，但是当切换到其他页面再切换回来时，打印selectValue中有值id，code依然存在，但是页面下拉框默认值显示为空。

出现这个原因首先是因为又页面的computed计算属性导致country发生变化时会重新获取country的值，因为country是存放在store里面，相当于一个变量，当页面刷新或重载时，这个也会重新赋值，而下拉框中默认值的选择是根据后台返回的数据的id也就是this.formData.list.telCountryCode 与country中每个对象中的id进行匹配而获得的结果，所以当country发生变化时，也会导致selectValue变化。

但是v-model绑定的时候是绑定的selectValue这个对象，并不是对象里面的属性，而改成上面那个this.selectValue.code = this.formData.list.telArea;
this.selectValue.id = this.formData.list.telCountryCode;只是对对象的属性进行操作，vue优化的很好，你页面上并没有对selectValue的属性进行绑定，所以就不会检测属性的变化，而达到性能的优化。

如果把v-model改成 v-model=”selectValue.id“; v-model=”selectValue.code“那么这样就能够检测到属性的变化，所以每次重新获取值应当对整个对象进行重新赋值，而不是仅仅是操作里面的属性。

才尝试写，里面有非常多的问题，欢迎大家提出，本人将会非常感激。