How to obtain data in child component in Vue.js 3?

I have a Date component that contains a calendar and time. I can select a date and time from this. I have another component called DatePopup that shows a calendar and time as a popup. This component contains OK and Cancel buttons. If a user selects OK, I want to get the date reactive variable in child component, i.e., Date.

How can I achieve this structure so that I can obtain the data from parent component?

Note that I use Quasar.

Date.vue

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-badge color="yellow-illerarasi-film-teskilati" text-color="black">
      Deadline: {{ date.full }}
    </q-badge>
  </div>

  <div class="q-gutter-md row items-start">
    <q-date v-model="date.full" mask="YYYY-MM-DD HH:mm" color="yellow-illerarasi-film-teskilati" text-color="black"/>
    <q-time v-model="date.full" mask="YYYY-MM-DD HH:mm" color="yellow-illerarasi-film-teskilati" text-color="black"/>
  </div>
  <p> {{ date }}</p>
</template>

<script>
import {reactive} from "vue";

export default {
  name: "Date",
  setup() {

    let date = reactive({
      full: "2022-01-01 00:00",
    })
    return {
      date,
    }
  }
}
</script>

<style scoped>

</style>

DatePopup.vue

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-dialog v-model="show">
      <q-card style="width: 700px; max-width: 80vw;">
        <q-card-section>
          <div class="text-h6">Choose a Deadline</div>
        </q-card-section>
        <q-card-section class="q-pt-none">
          <Date/>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="Cancel" color="primary" text-color="black" v-close-popup/>
          <q-btn label="OK" color="yellow-illerarasi-film-teskilati" text-color="black" v-close-popup/>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import Date from "./Date.vue";
import {reactive} from "vue";

export default {
  name: "DatePopup",
  components: {Date},
  props: {
    showPopup: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    return reactive({
      show: true
    })
  }
}
</script>

<style scoped>

</style>