I am creating a web-component using VueJS 3, I want to expose a method on the component allowing the user to do something like this:
<custom-component id="x1" />
<script>
var component = document.getElementById("x1");
component.customMethod(); // as focus() method on native elements
</script>
If I define a method on the component, I can call the method inside the component. But the method is not available when I use it as a web-component.
//main.ts/js
import { defineCustomElement } from "vue"
import component from "./component.ce.vue"
const element = defineCustomElement(component );
customElements.define("custom-component ", element);
//component.ce.vue
const customMethod = () => { console.log("Exected"); }
How I can indicate to Vue Component Wrapper that the customMethod will be available outside the component?