title: Vue3 extend component using composition api. Its this possible?
body: <p>I'm trying to create a dialog plugin in vue3 using composition api.</p>
  <p>I'm at the step where i want to extend a base component.</p>
  <p>Here is what I have:</p>
  <p><a href="https://stackblitz.com/edit/vue-rvlcuc" rel="nofollow noreferrer">I have created a live example here</a></p>
  <pre><code>// dialogInstaller.js
  // component passed by user or some default components
  import userComponent from &quot;./userComponent.vue&quot;;
  
  // helper mount function source: https://github.com/pearofducks/mount-vue-component
  import { mount } from &quot;@/mount&quot;;
  
  // dialog related functions that must be accesible from the component above after extending
  const dialogClose = ref(() =&gt; console.log(&quot;dialog closed&quot;)); // 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
  });
  </code></pre>
  <p>User component look like this:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;button type=&quot;button&quot; @click=&quot;dialogClose&quot;&gt;Close from template&lt;/button&gt;
      &lt;button type=&quot;button&quot; @click=&quot;dialogCloseFromSetup&quot;&gt;Close from setup&lt;/button&gt;
      &lt;button type=&quot;button&quot; @click=&quot;dialogCloseFromInstance&quot;&gt;Close from instance&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { ref, getCurrentInstance } from 'vue';
  export default {
    name: 'userComponent',
    setup() {    
      const dialogCloseFromSetup = () =&gt; {
        dialogClose();
      };
  
      const instance = getCurrentInstance().ctx;        
      const dialogCloseFromInstance = () =&gt; {
        instance.dialogClose();
      };
      return { dialogCloseFromSetup, dialogCloseFromInstance };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>What i want to achieve is that the method &quot;dialogClose&quot; to be available from the userComponent -- template (like button 1) and setup (like button 2).</p>
  <p>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</p>
  <p>If button 1 is clicked everything working as expected, but the second button is not working, method is not accessible in setup.</p>
  <p>I found a workaround to this problem by looking into the vue instance and accessing the method from &quot;getCurrentInstance().ctx&quot;. everything work as espected if i do this (button 3).</p>
  <hr />
  <p>I feel like this is not a good solution that's why im asking:</p>
  <ul>
  <li>Its the way i extend the vue component correct ?</li>
  <li>If its correct why can i access the method directly in the template and not in the setup?</li>
  <li>Its a good idea to run the method from getCurrentInstance().ctx ?</li>
  </ul>