Estamos activando métodos desde un componente principal en un componente secundario de esta manera:
await this.$refs.patientinputmask.$refs.patientpersonaldata.ChangePersonalData(); await this.$refs.patientinputmask.$refs.patientaddressdata.SavePersonalAddressObject(); await this.$refs.patientinputmask.$refs.patientbankaccountdata.SavePersonalBankAccountObject(); await this.$refs.patientinputmask.$refs.patientrelatedcontacts.SaveRelatedContactObject(); if (this.invoiceHN == true) { await this.$refs.patientinputmask.$refs.invoicedata.$refs.invoiceHN.$refs.invoiceKasseHeaderHN.SavePatientDataForInvoice(); await this.$refs.patientinputmask.$refs.invoicedata.$refs.invoiceHN.$refs.invoicingTemplateHN.SavePatientTemplateConfigDTO(); }De vez en cuando ocurre un error: [Vue warn]: Error en von handler (Promises/async): "TypeError: Cannot read properties of undefined (reading '$refs')", lo que hace que toda la cascada de llamadas a funciones colapse y ninguno de estos métodos se activa. Los métodos y los datos se encuentran en los componentes secundarios. ¿Qué problema puede causar ese comportamiento?
Parece que algunos de los componentes secundarios no están completamente montados cuando ejecuta su código. ¿Cuándo está ejecutando este código en el elemento principal?
Puede activar un evento de cada uno de los componentes secundarios al montar, luego ejecutar su código después de que todos hayan sido montados.
<child-component @hook:mounted="doSomething" />(Ejemplo encontrado aquí: Vue JS 2.0 Child Component Mounted Callback )