Vue 2 global mixin not working only in App.vue

Question

I have a Global mixin that works everywhere except in the App.vue.This mixin is supposed to load a Yaml config file and make it available everywhere.

So the question is ¿why it doesn't work only in App.vue and how to solve it?

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import Vuelidate from 'vuelidate'
import yaml from 'js-yaml'
import fs from 'fs'
Vue.use(Vuelidate)
import { BootstrapVue } from 'bootstrap-vue'

import {
  BIcon,
  BIconChevronDoubleDown,
  BIconChevronDoubleUp,
  BIconEyeFill,
  BIconEyeSlashFill
} from 'bootstrap-vue'


Vue.use(BootstrapVue)
Vue.component('BIcon', BIcon)
Vue.component('BIconChevronDoubleDown', BIconChevronDoubleDown)
Vue.component('BIconChevronDoubleUp', BIconChevronDoubleUp)
Vue.component('BIconEyeFill', BIconEyeFill)
Vue.component('BIconEyeSlashFill', BIconEyeSlashFill)

Vue.prototype.$axios = axios 
Vue.config.productionTip = false

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.mixin({
  data() {
    return {
      ebaConfig: null,
      publicPath: process.env.BASE_URL
    }
  },
  methods: {

    async loadEbaConfig() {
      const config = await axios.get(`${this.publicPath}config.yaml`)
      const doc = yaml.load(config.data)
      this.ebaConfig = doc
    }

  },
  created() {
    this.loadEbaConfig()
  }
})

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

Yaml file:

btnRedirectUrl: "www.google.com/"
btnRedirectText: "google"

App.vue:

<template>
  <div id="app">
    ...
    <b-button id="redirect" size="sm">{{btnRedirectText}}</b-button>
    ...
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
import router from "./router";
import {app} from "./main.js";

export default {
  data() {
    return {
      ...
      btnRedirectText: app.ebaConfig.btnRedirectText,
      ...
    };
  },
  computed: {
    ...
  },
  methods: {
    ...
  },
};
</script>
<style scoped>
...
</style>

This is the error:

Solution i tried and still not resolve this issue

App.vue:

  data() {
    return {
      btnRedirectText: "",      
    };
  },
...
  mounted(){
    this.btnRedirectText = app.ebaConfig.btnRedirectText;
  }

But i still get the undefined error:

[Vue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading 'ebaConfig')"

found in

---> <App> at src/App.vue
       <Root>