SOURCE

const { createApp, ref } = Vue

  createApp({
    data() {
      return {
        btn: '这是一个按扭',
        message:'hello world!'
      }
    },
    methods:{
      clickHandle(){
        this.message="hello WebComponent!"
      }
    }
  }).mount('#app')

// 1. 创建MyButton自定义元素  
class MyButton extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.shadowRoot.innerHTML = `<button><slot>Button</slot></button>`;
    }
}
 // 2. 注册my-button标签,关联到MyButton
customElements.define('my-button', MyButton);

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
<p>{{message}}</p>
<my-button @click="clickHandle">{{ btn }}</my-button>
</div>