title: How to access root context from a composition function in Vue Composition API / Vue 3.0 + TypeScript?
body: <p>I want to create <strong>a reusable wrapper function</strong> written in <strong>TypeScript</strong> for triggering a toast notification by using <strong>a composition function</strong>, as defined in the current specification for Vue 3.0: <a href="https://vue-composition-api-rfc.netlify.com/" rel="noreferrer">Composition API RFC</a>.</p>
  
  <p>This example is using BootstrapVue v2.0 toast component. With Vue 2, it would be invoked via the <code>this.$bvToast</code> Vue component instance injection <strong>in the root context</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.$bvToast.toast('Error happened', {
    title: 'Oh no',
    variant: 'danger'
  });
  </code></pre>
  
  <p>This service-like composition function would look much like this:</p>
  
  <pre><code>// File: @/util/notify.ts
  export function useNotify() {
    const notifyError = (title: string, msg: string) =&gt; {
      // How to access context.root as in a function component, without passing it to this function?
      context.root.$bvToast.toast(msg, {
        title,
        variant: 'danger'
      });
    };
  
    return { notifyError};
  }
  
  export default useNotify;
  </code></pre>
  
  <p>And would be used much like this:</p>
  
  <pre><code>// Use in your functional component:
  import { createComponent } from '@vue/composition-api';
  
  import { useNotify} from '@/util/notify';
  
  export default createComponent({
    name: 'MyFailingComponent',
    setup() {
      const { notifyError } = useNotify();
  
      notifyError('Request error', 'There was an error processing your request, please try again later.');
  
      return {};
    }
  });
  </code></pre>