title: Error creating custom plugin Vuejs + Typescript
body: <p>I have this structure of my index and service plugin:</p>
  <p><a href="https://i.stack.imgur.com/Oh3Gq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Oh3Gq.png" alt="enter image description here" /></a></p>
  <p>service.ts</p>
  <pre><code>declare interface Params {
    title: string;
    description?: string;
    type?: string;
    duration?: number;
  }
  
  export default class ServiceToast {
    public toastRef: any; // component
  
    public constructor(modalRef: any) {
      this.toastRef = modalRef;
      console.log(this.toastRef);
    }
  
    public open(params: Params) {
      this.toastRef.open(params);
    }
  }
  </code></pre>
  <p>Basically I have created a service that receives the component so that it interacts with the component at ease.</p>
  <p>index.ts:</p>
  <pre><code>import _Vue from 'vue';
  import Toast from '@/components/_includes/layouts/Toast.vue';
  import ServiceToast from './service';
  
  const ToastPlugin = {
    install: (Vue: typeof _Vue, options?: any) =&gt; {
      Vue.mixin({
        created() {
          Vue.prototype.$toast = new ServiceToast(Toast);
        },
      });
    },
  };
  
  export default ToastPlugin;
  </code></pre>
  <p>Where I install the plugin and use the service that I showed above.</p>
  <p><a href="https://i.stack.imgur.com/nDKFB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nDKFB.png" alt="enter image description here" /></a></p>
  <p>Here I call the plugin and make it the corresponding Vue.use but when I want to call it in any component:</p>
  <pre><code>&lt;a @click=&quot;$toast.open({ title: 'Hola mundo' })&quot;&gt;Hola, dame click!&lt;/a&gt;
  </code></pre>
  <p>I get the following error: &quot;TypeError: this.toastRef.open is not a function&quot;</p>
  <p>En el shims-vue-plugin.d.ts:</p>
  <pre><code>/* eslint-disable */
  import Vue from 'vue';
  import { AxiosInstance } from 'axios';
  import 'webpack-env';
  import { FieldFlagsBag } from 'vee-validate';
  import { SnackbarProgrammatic as Snackbar, DialogProgrammatic as Dialog } from 'buefy';
  import ServiceToast from './app-config/toast/service';
  
  declare module 'vue/types/vue' {
    interface Vue {
      $auth: any;
      $axios: AxiosInstance;
      veeFields: FieldFlagsBag;
      $dialog: typeof Dialog;
      $snackbar: typeof Snackbar;
      $toast: ServiceToast;
    }
  }
  
  
  declare namespace NodeJS {
    interface Process extends __WebpackModuleApi.NodeProcess {
      server: boolean;
    }
  }
  </code></pre>
  <p>Does anyone know what it could be? or that I'm missing since I can't find the error: /</p>