I am stuck since a couple of days and tried to solve my problem without any result.

I am building a Vue 3 app and store data in a Firestore database. On a result page I want to display the data from the database.

getDBdata() {

const cuser = this.user.email;
console.log("cuser:", cuser)  
const q = query(collection(db, "testergebnisse"), where("email", "==", cuser));

const unsubscribe = onSnapshot(q, (querySnapshot) => {
const mitarbeiter = [];
querySnapshot.forEach((doc) => {
this.mitarbeiter.push({
 ...doc.data(),
 id: doc.id,
 testdate: moment(doc.data().testdatum.seconds).format("DD/MM/YYYY"),
 })
 mitarbeiter.push(doc.data().testdatum);
 });
 console.log("Current records: ", mitarbeiter);
 });

}

In the Template section I want to render the data:

<q-card v-for="use in mitarbeiter" :key="use.d" flat bordered class="my-card text-white"
      style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)">
            <q-card-section>
        <div class="row items-center no-wrap">
          <div class="col">
            <div class="text-h6">Testergebnis Covid 19 Test</div>
            <div class="text-subtitle2">Testdatum: {{ use.testdate }}</div>
            <div class="text-subtitle2">Ergebnis: {{ use.testergebnis }}</div>
            <div class="text-subtitle2">Test Hersteller: {{ use.testhersteller }}</div>
            <div class="text-subtitle2">Test ID: {{ use.id }}</div>
          </div>
        </div>
      <span></span>
      </q-card-section>
      </q-card>

When I click the button I fire the function getDBdata() and I can see in the console that it actually gets the data from the database. But the data is not rendered in the DOM.

When I change the :key in the code the page reloads and also displays the data. I also tried to fire the function on created () without success.

I have no idea what else I can do. Any help highly appreciated.

Thanks and regards, Marc