Vue .sync事件与组件有关

Question

我正在使用vue的.sync功能在element-ui提供的层之上创建一个组件层，仅用于基于该组件创建新组件。问题在于，而不是this。$ emit（'update：data'，this.value）在事件上发出的值，我得到的是CustomEvent对象，因此结果如下：

问题是，我只发送输入值，而不发送事件，如下所示：

发送值：

收到的值：

我的HelloWorld.vue像这样

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <div>THE PARENT: {{input}}</div>
    <my-custom-element placeholder="HI1" :data="input" @update:data="updateInput"></my-custom-element>
    <my-custom-element placeholder="HI2" :data.sync="input"></my-custom-element>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      input : "hello"
    }
  },

  methods : {
    updateInput : function(e){
      //JUST FOR DEBUGGIN PURPOSE
      this.input = e;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

VueWebComponent是这种方式

<template>
  <div>
    <h1>My Vue Web Component</h1>
    <div>THE CHILD: {{data}}</div>
    <el-input :placeholder="placeholder" :v-model="data" @input="update"></el-input>

  </div>
</template>
<script>
  export default {
    props: ['data', 'placeholder'],
    data : function(){
      return {
        value : this.data
      }
    },
    methods : {

      update : function(value){
        this.value = value
        this.$emit('update:data', this.value)
      }
    }
  }
</script>

和main.js声明

import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import wrap from '@vue/web-component-wrapper';
import VueWebComponent from './components/VueWebComponent';

Vue.use(Element)

Vue.config.productionTip = false
const CustomElement = wrap(Vue, VueWebComponent);
window.customElements.define('my-custom-element', CustomElement);

new Vue({
  render: h => h(App),
}).$mount('#app')