如何正确使用vue中的sync修饰符

从2.3.0起，Vue重新引入了 .sync修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

示例一：

<parent :items.sync="data1"></parent>
等同
<parent :items="data1" @update:items="val => data1 = val"></parent>

vue父子通讯是单向数据流，也就是子组件不能修改父组件的值，但是在很多情况下是需要这样做的，比如在做功能编辑的时候，子组件需要带入父组件的原始值，而且子组件也需要修改这个值，到最后的保存值中，部分代码

示例二：

// 父组件
<step-two-other v-bind:stepTwoConfig.sync="monitorConfigStr"></step-two-other>

// 子组件
<el-input v-model="config"></el-input>
props: {
    stepTwoConfig: String
},
computed: {
    config: {
        get() {
            return this.stepTwoConfig
        },
        set(val) {
            this.$emit('update:stepTwoConfig', val)
        }
    }
}

以上代码是正确的通信方式。

但是在使用的时候发现一些问题，如果父组件传入的值是简单数据类型（string、number）时必须要使用$emit去更新。
如果父组件传入的值是引用类型时则不需要，甚至父组件不用带sync也可以，以下方式不会报错，而且能正确传值：

示例三：

// 父组件
<step-two-other v-bind:stepTwoConfig.sync="monitorConfigStr"></step-two-other>

// 子组件
<el-input v-model="stepTwoConfig.name"></el-input>
props: {
    stepTwoConfig: Object
}