title: Why doesn't TypeScript recognize module augmentation for a Vue plugin?
body: <p>I have a Vue project that I'm building to learn both Vue and TypeScript. The project has a chunk of static data that I've chosen to make available to components as a Vue plugin, adding a property to the Vue prototype. </p>
  
  <pre><code>import _Vue from 'vue';
  
  export default function myPlugin(Vue: typeof _Vue): void {
    Vue.prototype.$myPlugin = { one: 1, two: 2 };
  }
  </code></pre>
  
  <p>I followed the advice in a <a href="https://www.mistergoodcat.com/post/vuejs-plugins-with-typescript" rel="noreferrer">post by Peter Kuhn</a>, defining the property type in a <code>test-plugin.d.ts</code> file.</p>
  
  <pre><code>import Vue from 'vue';
  
  declare module 'vue/types/vue' {
      interface Vue {
          $myPlugin: object;
      }
  }
  </code></pre>
  
  <p>Finally, I <code>import</code> and <code>use()</code> the plugin.</p>
  
  <pre><code>import Vue from 'vue';
  import App from './App.vue';
  import MyPlugin from './test-plugin';
  
  Vue.use(MyPlugin);
  
  new Vue({
    render: (h) =&gt; h(App),
  }).$mount('#app');
  </code></pre>
  
  <p>However, when I reference the property in a single-file Vue component, both vscode and the TypeScript transpiler throw an error that the property doesn't exist.</p>
  
  <pre><code>&lt;script lang="ts"&gt;
  import Vue from 'vue';
  
  export default Vue.extend({
    name: 'HelloWorld',
    props: {
      msg: String,
    },
    data: {
      one: 0,
    },
    created(): void {
      this.one = this.$myPlugin.one;
    },
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The error:</p>
  
  <pre class="lang-text prettyprint-override"><code>ERROR in /Users/kccricket/Projects/what-the-heck/vue-plugin-test/src/components/HelloWorld.vue
  43:21 Property '$myPlugin' does not exist on type 'CombinedVueInstance&lt;Vue, { one: number; }, {}, {}, Readonly&lt;{ msg: string; }&gt;&gt;'.
      41 |   },
      42 |   created(): void {
    &gt; 43 |     this.one = this.$myPlugin.one;
         |                     ^
      44 |   },
      45 | });
      46 | &lt;/script&gt;
  </code></pre>
  
  <p>Despite the error, <code>this.one === 1</code> as I'd expect once the code is built and executed. Can anyone pinpoint what I'm doing wrong, here?</p>
  
  <p>I've posted the sample code to GitHub: <a href="https://github.com/kccricket/what-the-heck/tree/master/vue-plugin-test" rel="noreferrer">https://github.com/kccricket/what-the-heck/tree/master/vue-plugin-test</a></p>
  
  <h1>Environment</h1>
  
  <pre class="lang-none prettyprint-override"><code>"dependencies": {
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "^3.0.0-rc.5",
    "@vue/cli-service": "^3.0.0-rc.5",
    "vue-template-compiler": "^2.5.16"
  }
  </code></pre>