Right now I'm fetching asynchronous data from child components like so inside the parent:

<template layout="backend/cms-layout">
  <div id="cms-gallery-create" class="cms-gallery-create">
    <form @submit.prevent="submit" method="post" enctype="multipart/form-data">
      <cms-editor v-model="form.body" @emitBody="form.body=$event"/>
    </form>
  </div>
</template>


<script setup>
import CmsEditor from '../../components/backend/cms-editor.vue'
import {reactive, watch} from "vue";

const form = reactive({
    body: ''
})

const submit = () => {
    watch(() => form.body, () => {
        // send http request
    })
}
</script>

Basically, when submit function is run, a watcher is waiting for a change in form.body to send the http request.

Is there a more elegant way to get form.data from the child which is asynchronous, other than using a watcher? I was hoping for something like v-model:await.