I'm trying to create a dialog plugin in vue3 using composition api.

I'm at the step where i want to extend a base component.

Here is what I have:

I have created a live example here

// dialogInstaller.js
// component passed by user or some default components
import userComponent from "./userComponent.vue";

// helper mount function source: https://github.com/pearofducks/mount-vue-component
import { mount } from "@/mount";

// dialog related functions that must be accesible from the component above after extending
const dialogClose = ref(() => console.log("dialog closed")); // just an example

// extend the component
const dialogPop = {
  extends: userComponent,
  setup() {
    return {
      dialogClose,
      ...userComponent.setup(),
    };
  },
};

// now mount the component
const { vNode, destroyVNode, el } = mount(dialogPop, {
  props: {},
  app: appInstance, // vue app instance
  element: dialogWrapper, // component mount location
});

User component look like this:

<template>
  <div>
    <button type="button" @click="dialogClose">Close from template</button>
    <button type="button" @click="dialogCloseFromSetup">Close from setup</button>
    <button type="button" @click="dialogCloseFromInstance">Close from instance</button>
  </div>
</template>

<script>
import { ref, getCurrentInstance } from 'vue';
export default {
  name: 'userComponent',
  setup() {    
    const dialogCloseFromSetup = () => {
      dialogClose();
    };

    const instance = getCurrentInstance().ctx;        
    const dialogCloseFromInstance = () => {
      instance.dialogClose();
    };
    return { dialogCloseFromSetup, dialogCloseFromInstance };
  },
};
</script>

What i want to achieve is that the method "dialogClose" to be available from the userComponent -- template (like button 1) and setup (like button 2).

In other words i want that method to be accessible from every component that is passed to the dialog plugin. My head jump straight to the extend option because i used to use before in vue2

If button 1 is clicked everything working as expected, but the second button is not working, method is not accessible in setup.

I found a workaround to this problem by looking into the vue instance and accessing the method from "getCurrentInstance().ctx". everything work as espected if i do this (button 3).

I feel like this is not a good solution that's why im asking:

• Its the way i extend the vue component correct ?
• If its correct why can i access the method directly in the template and not in the setup?
• Its a good idea to run the method from getCurrentInstance().ctx ?