Vue .Sync событие проблема с компонентами

Question

Я использую функцию .sync в vue для создания слоя компонентов над тем, который предоставляет element-ui, только для создания новых компонентов на его основе.Проблема в том, что вместо значения, генерируемого этим событием. $ 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')