How to bind the prop node values of a Quasar tree row to a div

How to bind the prop node values of a Quasar tree row (with v-slot:default-header="prop") to a div.

Note: node-key must have ID assigned for CRUD operations

  <div class="q-pa-md q-gutter-sm">
    <q-tree
      :nodes="simple"
      node-key="id"
      label-key="name"
      children-key="children"
      v-model:selected="selected"
     default-expand-all
  >
    <template v-slot:default-header="prop">
      <span class="text-bold q-mr-xs"> {{ prop.node.name }} </span> -
      {{ prop.node.country }}
    </template>
  </q-tree>
    <div class="bg-grey-4 q-pa-xs" style="width: 400px; height:100px">Selected name and country (Name 1 - USA): {{ selected }}</div>
</div>

CODEPEN