methods functions can be used in custom elements

[GuoJikun]

What problem does this feature solve?

Functions in methods cannot be called directly from a custom element（在自定义元素中无法直接调用methods中的方法）

What does the proposed API look like?

methods functions can be used in custom elements（methods的函数可以在自定义元素上使用）

example（示例）

// setup
// Button.ce.vue 

<script setup>
import { defineExpose } from 'vue'
const test = ()=>{
  console.log('123')
}
defineExpose({
  test
})
</script>

<template>
  <div class="btn">
    <slot></slot>
  </div>
</template>

// option
// Button.ce.vue   

<script>
import { defineComponent } from 'vue'

defineComponent({
  methods: {
    test(){
      console.log('123')
    }
  }
})
</script>

<template>
  <div class="btn">
    <slot></slot>
  </div>
</template>

// app.vue
<script setup>
import { defineCustomElement, onMounted } from 'vue'
import Button from './Button.ce.vue'
const IButton = defineCustomElement(Button)
customElements.define('i-button', IButton)

onMounted(()=>{
  document.querySelector('#test').test() // like this(这种方式调用)
})
</script>
<template>
  <div>
    <i-button id="test">test</i-button>
  </div>
</template>

[LinusBorg]

duplicate: #5540