Getting parent and child document data from Firestore in a single Vue component

I have a parent (organisation) document in firestore and multiple child documents. I want load he data based on if the parent or child was clicked in the same component.

The below code works, the data is shown, but updates to the child organisations are not shown in real time (I have to reload to see it.). I'm guessing it is because I'm binding the array orgArray and not the object org that I actually use to display the data. Is there a way to just bind the object and not the whole array?

<template>
    <div class="route-container">
        <div class="item__container">
            <FmisTitle/>

            <Hero
              :orgName="org.name"
              :orgLogo="org.logo"
              :orgState="org.state"
              :orgNumber="org.number"
              :orgType="org.type"
              :orgDateStart="org.dateStart"
              :orgDateEnd="org.dateEnd"
              :orgDateStartF="org.dateStartFunctional"
              :orgDateEndF="org.dateEndFunctional"
              :orgCoverImage="org.coverImagex745"
              :childRef="org.id"
              :orgRef="orgRef"
            />

            <Contact
              :orgEmail="org.email"
              :orgPhone="org.phoneNumber"
              :orgAddress="org.address"
              :orgWebsite="org.website"
              :orgSocials="org.socials"
              :childRef="org.id"
              :orgRef="orgRef"
            />

            <ButtonDuo/>
        </div>
    </div>
</template>

export default {
  data() {
    return {
      org: {},
      orgArray: [],
      orgRef: '',
    };
  },
created() {
    firebase.auth().onAuthStateChanged((user) => {
      firestore.collectionGroup('people').where('userId', '==', user.uid).get().then((query) => {
        query.forEach((userRef) => {
          const orgRef = userRef.ref.parent.parent.id;
          this.orgRef = orgRef;
          if (!this.$route.params.parent) {
            const organisation = firestore.collection('organisations').doc(orgRef).collection('childOrganisations').where('name', '==', this.$route.params.id);
            this.$bind('orgArray', organisation).then((doc) => {
              const org = doc[0];
              this.org = org;
            });
          } else {
            const organisation = firestore.collection('organisations').doc(orgRef);
            this.$bind('org', organisation);
          }
        });
      });
    }, (error) => {
      console.log(error);
    });
  },
}

I solved this by using the id from the childOrg and getting the data with that id, that way I could bind the data object directly.

firebase.auth().onAuthStateChanged((user) => {
      firestore.collectionGroup('people').where('userId', '==', user.uid).get().then((query) => {
        query.forEach((userRef) => {
          const orgRef = userRef.ref.parent.parent.id;
          this.orgRef = orgRef;
          if (this.$route.query.parent !== 'true') {
            firestore.collection('organisations').doc(orgRef).collection('childOrganisations').where('name', '==', this.$route.params.id)
              .get()
              .then((q) => {
                q.forEach((ref) => {
                  const orgId = ref.id;
                  const organisation = firestore.collection('organisations').doc(orgRef).collection('childOrganisations').doc(orgId);
                  this.$bind('org', organisation);
                });
              });
          } else {
            const organisation = firestore.collection('organisations').doc(orgRef);
            this.$bind('org', organisation);
          }
        });
      });
    }, (error) => {
      console.log(error);
    });