title: How to access a Vue plugin from another plugins (using Vue.prototype)?
body: <p>I'm trying to write a Vue plugin that's a simple abstraction to manage auth state across my app. This will need to access other Vue plugins, namely <code>vuex</code>, <code>vue-router</code> and <code>vue-apollo</code> (at the moment).</p>
  
  <p>I tried extending <code>Vue.prototype</code> but when I try to access the plugin's properties how I would normally - eg. <code>this.$apollo</code> - I get the scope of the object, and therefore an <code>undefined</code> error. I also tried adding <code>vm = this</code> and using <code>vm.$apollo</code>, but this only moves the scope out further, but not to the <code>Vue</code> object - I guess this is because there is no instance of the Vue object yet?</p>
  
  <pre class="lang-js prettyprint-override"><code>export const VueAuth = {
    install (Vue, _opts) {
      Vue.prototype.$auth = {
        test () {
          console.log(this.$apollo)
        }
      }
    }
  }
  </code></pre>
  
  <p>(The other plugins are imported and added via. <code>Vue.use()</code> in the main <code>app.js</code>)</p>
  
  <p>Alternatively, I tried...</p>
  
  <pre class="lang-js prettyprint-override"><code>// ...
    install (Vue, { router, store, apollo })
  // ...
  </code></pre>
  
  <p>but as a novice with js, I'm not sure how this works in terms of passing a copy of the passed objects, or if it will mutate the originals/pass by ref. And it's also very explicit and means more overhead if my plugin is to reach out to more plugins further down the line.</p>
  
  <p>Can anyone advise on a clean, manageable way to do this? Do I have to instead alter an instance of <code>Vue</code> instead of the prototype?</p>