How to achieve Master-Details with quasar is qtable

Question

I would like to know how to achieve Master details using two q-tables. Such that when a row is selected in qtable(staffs) the whole details is shown in qtable (staff_details).

<q-table title="Staff List" ref="dataTable" :data="staffs" dense row-key="id" v-if="staffs.length > 0"
            :config="configs" :columns="columns_Master" selection="single" :selected.sync="selected"
            class="striped-odd loosed flipped">
            <template v-slot:body-cell="props">
              <q-td :props="props"  @click.native="selectedStaff(props.row.email)">
                <div>{{props.value}}</div>
              </q-td>
            </template>
</q-table>

Second table for details

<q-table title="Staff Details" ref="staffData" :data="staff" dense row-key="id"
            :config="configs_detail" :columns="columns_Details" class="striped-odd loosed flipped">
</q-table>

Script file

methods: {
    selectedStaff (email) {
      console.log('data: ', email)
      this.$auth.fetchStaffEmail(email)
        .then((response) => {
          console.log('by email', response)
          this.staff = response.data.data[0]
          console.log(this.staff)
        })
    },
    getStaffs () {
      this.$auth.fetchStaff()
        .then(response => {
          console.log('getstaff:', response)
          this.staffs = response.data.data
        })
    }

And my vuex/axios

const STAFF_ROUTE = '/staffs'

// fetch staff details
export function fetchStaffEmail (state, data) {
  let token
  if (LocalStorage.has('token')) {
    token = LocalStorage.getItem('token')
  } else if (SessionStorage.has('token')) {
    token = SessionStorage.getItem('token')
  }
  if (token) {
    axiosInstance.defaults.headers.common['Authorization'] = 'Bearer ' + token
    if (data) {
      return axiosInstance.get(STAFF_ROUTE + '?email=' + data)
    }
  }
}

I am using feathers js and MySQL as backend