Estoy tratando de lograr que tengo una pregunta. Estoy enviando datos a la función loadFromTemplate y estos datos están escritos así:

 data() { return { fill: { Page:{ de: { faq: { } } } } } }

<button @click="loadFromTemplate('FAQ',fill.Page.de.faq)">Cargar desde plantilla

 async loadFromTemplate(path, $e) { const db = getFirestore(); const docRef = doc(db, "usersCollection", this.$store.state.auth.email); const docSnap = await getDoc(docRef); let userTemplates = null; if(docSnap.exists()) { userTemplates = docSnap.data().templates[this.$store.state.lang] } else { // doc.data() will be undefined in this case console.log("No such document!"); } console.log($e) $e = [...$e, userTemplates[path]] console.log($e) }

Puedo obtener los datos correctos de esta manera, pero cuando los asigno de todos modos, ya no son reactivos. Cuando lo asigno a $e, quiero que también cambie en la interfaz de usuario. Como es normal así.fill.Page.de.faq = userTemplates[ruta]. Como tengo muchos niveles de datos como este, estoy tratando de lograr una función

¿Cómo puedo lidiar con este problema?