Why is the new vue instance property not being added?

Question

Vue.js

Already tried everything - after creating a vue instance, the plugin instance under the declared property is not cut. As a result, I can not ajax out of context. Adding an instance property does not work for no apparent reason, I've already tried it in the tail and in the mane!

Plugin code:

import axios from 'axios'
class Ajax {
  constructor () {
    console.log('ok')
    this.baseURL = 'http://localhost:3000/'
    this.token = ''
    const token = localStorage.getItem('token')
    if (token && token.length) this.setToken(token)
  }

  setToken (value = '') {
    this.token = value
  }

  get (url, params, onSuccess, onError, onFinish) {
    axios({
      baseURL: this.baseURL,
      url,
      method: 'GET',
      data: params,
      headers: { token: this.token }
    }).then((resp) => {
      if (typeof onSuccess === 'function') onSuccess(resp)
    }).catch(error => {
      if (typeof onError === 'function') onError(error)
    }).finally(() => {
      if (typeof onFinish === 'function') onFinish()
    })
  }

  post (url, params, onSuccess, onError, onFinish) {
    axios({
      baseURL: this.baseURL,
      url,
      method: 'POST',
      data: params,
      headers: { token: this.token }
    }).then((resp) => {
      if (typeof onSuccess === 'function') onSuccess(resp)
    }).catch(error => {
      if (typeof onError === 'function') onError(error)
    }).finally(() => {
      if (typeof onFinish === 'function') onFinish()
    })
  }
}
export default {
  install (Vue, options) {
    console.log('Installing the plugin!')
    Vue.$ajax = function () {
      return new Ajax()
    }
    // Object.defineProperty(Vue, '$ajax', new Ajax())
  }
}

Point of entry:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import i18n from './utilities/i18n'
import ajax from './utilities/ajax'
import locale from 'element-ui/lib/locale/lang/ru-RU'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/fonts.scss'
import './assets/tailwind.css'
Vue.config.productionTip = false
Vue.use(ajax)
Vue.use(ElementUI, { locale })

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

store.$app = app

console.log(app)

Answer 1

And what kind of gesture is this?

Vue.prototype.$ajax = function () {
      return new Ajax()
}

Why not? Why a function? For example, I do this and everything always works: https://github.com/yarkovaleksei/vue2-storage/blob...
Vue.prototype.$ajax = new Ajax();

Answer 2

Vue.$ajax = function () {

Vue.prototype.$ajax = function() {

Answer 3

I also changed the type of question from complex to simple, I'm freaking out. You tell him - it does not work either through a property or through a prototype - he blurred his eyes and continues to carry nonsense. View is a brilliant frame, and the community is just disgusting. React is a terrible liba, and the community is a real darling. An interesting gradation
In short, only one way to solve the problem has been found so far - it is a crutch. According to the docs, installing an instance of your class as a plugin view DOES NOT WORK THROUGH THE PROPERTY NOR THROUGH THE PROTOTYPE
Only the declaration of the property works AFTER creating the application instance

const app = new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')
// вместо vue use ajax, где ajax - объект с install, в котором объявляется новое св-во / прототип
app.$ajax = new Ajax()
store.$app = app