I'm trying to create a common component library for two Vue applications, allowing the applications to define their own Vue.prototype.$someGlobal (specfically, an Axios instance). I'm trying to use this global from the shared component library, so that each app can have it's own Axios configuration and have the shared component use whichever is used.

However, while I have no problem accessing this.$someGlobal from components in the main package, if I refer to it in the common package it will be undefined.

Code:

# main.ts
import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$someGlobal = 'some global';

new Vue({
  render: h => h(App),
}).$mount('#app')

# app/App.vue
<template>
  <div id="app">
    App
    <some-component />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import SomeComponent from "common-components/SomeComponent.vue"

@Component({
  components: {SomeComponent}
})
export default class App extends Vue {
  mounted() {
    console.log("this.$someGlobal in App:", this.$someGlobal)
  }
}
</script>

# common/SomeComponent.vue
<template>
  <span>some component</span>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class SomeComponent extends Vue {
  mounted() {
    console.log("this.$someGlobal in SomeComponent:", this.$someGlobal)
  }
}
</script>

Console output when opening this app:

this.$someGlobal in SomeComponent: undefined
this.$someGlobal in App: some global

Demo repo: https://github.com/timraasveld/vue-prototype-with-common-package-demo

Can someone explain why this.$someGlobal is defined in components in the main /app package, but not in the dependency /common package? And how should I go about properly sharing a Vue global between the app and the component library?

I already tried making a mixin, but faced the same problem.