vue父子组件双向数据绑定

项目中需要一个父子组件双向绑定的场景，之前一直用的是常规props+$emit的形式，然后温习了一遍官方文档（vue2.x）

文档链接： https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

演示代码是两种传参形式对比，两种形式是等价的，方便理解，上代码

父组件

<template>
  <child :city.sync="formData.city"
         :company="formData.company"
         @updata:company="formData.company = $event" />
</template>
<script>
import child from './child'
export default {
  components: {
    child,
  },
  data () {
    return {
      formData: {
        city: '',
        company: '',
      },
    }
  }
}
</script>

子组件

<template>
  <div>
    <el-form ref="form">
      <el-form-item label='城市'>
        <el-select v-model='formData.city'>
          <el-option v-f