I am trying to achieve that I have a question. I am sending data to loadFromTemplate fnction and this data is written like this:

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

          }
        }
      }
    }
  }
}

<button @click="loadFromTemplate('FAQ',fill.Page.de.faq)">Load from template

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)
}

I am able to get the correct data this way but when I assign it anyway it isn't reactive anymore. When I assign it to the $e I want it to change in UI also. As it is normal like this.fill.Page.de.faq = userTemplates[path]. Since I have many levels of data like this I am trying to achieve a function

How can I deal with this problem?