Use all retrieved documents in a collection on vue ref

Question

Im trying to show all document from firestore collection to a table using ref but I confused from accessing each field to template ref

getDocs(collection(db, "usr"))
  .then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      console.log(doc.data())
    });
})

how to access the doc.data() from template ref similar like this?

const employees = ref([
{
    name: 'John Doe',
    title: 'IT Technician',
    department: 'IT Department',
    employment: 'Probation',
    status: 'Terminated',
    joined: '16 Jul 2021',
    email: 'john.doe@example.com',
},
{
    name: 'Jane Doe',
    title: 'Marketing',
    department: 'Marketing Department',
    employment: 'Permanent',
    status: 'Active',
    joined: '16 Jul 2021',
    email: 'jane.doe@example.com',
},

       <tr v-for="employee in employees" :key="employee.email">
            <td >
              <div>
                  <div>
                    {{ employee.name }}
                  </div>
                  <div>
                    {{ employee.email }}
                  </div>
              </div>
            </td>
            <td>
              <div>{{ employee.title }}</div>
              <div>{{ employee.department }}</div>
            </td>
            <td>
              <span> {{employee.status}} </span>
            </td>
            <td>
              {{ employee.joined }}
            </td>
            <td>
              {{ employee.employment }}
            </td>
            <td>
              <a href="#">Edit</a>
            </td>
      </tr>

I cant access the doc.data() outside of the function or promise. Im using script setup.

Answer 1

The following will do the trick:

getDocs(collection(db, "usr"))
  .then((querySnapshot) => {
    const array = [];
    querySnapshot.forEach((doc) => {
      array.push(doc.data());
    });
    employees.value = array;
})