Mi aplicación es una aplicación frontal de Vue 2 que carga un archivo de configuración, ya que es una interfaz genérica y cada cliente tiene su propio archivo de configuración. La configuración es un archivo Yaml que se carga cuando se inicia la aplicación. El archivo de configuración tiene propiedades como:

 urlBtn: https://www.youtube.com/

Este es mi 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"; import { BootstrapVue } from "bootstrap-vue"; import { BIcon, BIconChevronDoubleDown, BIconChevronDoubleUp, BIconEyeFill, BIconEyeSlashFill } from "bootstrap-vue"; import "bootstrap/dist/css/bootstrap.css"; import "bootstrap-vue/dist/bootstrap-vue.css"; Vue.use(Vuelidate); 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; export const app = new Vue({ 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; } }, router, store, created() { this.loadEbaConfig(); }, render: h => h(App) }).$mount("#app");

Cuando intento acceder a la propiedad ebaConfig en el gancho de vida mounted de otro componente, es nulo. Ejemplo:

 mounted() { if (this.$root.ebaConfig.urlBtn.trim()) { this.showCecomaWebBtn = true; } }

En el ejemplo anterior, me sale el error:

 [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of null (reading 'urlBtn')" found in ---> <App> at src/App.vue <root>

No entiendo por qué sucede ya que la carga de la propiedad se ejecuta en el ciclo de vida created . Por lo tanto, debe estar disponible para los demás componentes en el ciclo de vida mounted . ¿Cómo puedo solucionar eso? ¿Qué estoy haciendo mal?

Nota: El archivo de configuración es un archivo yaml válido ya que todo funciona correctamente cuando uso esa propiedad de manera normal, es decir, fuera de los ciclos de vida. Parece que, a pesar de estar en el ciclo de vida created , los datos se cargan al final de la carga completa de la aplicación.