How to pass form input elements via scoped slots to child component

Question

How do I access the data entered in my input elements, which are passed through via a slot, to my child component that opens up a modal with the form elements inside of it?

I've been reading the vue docs about scoped slots but honestly, I just can't figure it out how to make it work in my example. None of the examples make use of an input element with a v-model that is being passed to the child component.

I have created a component "BaseFormModal" which contains the following code: Note that the validation (vee-validate) occurs inside here, so this child component emits a "submit" event when the data is considered valid, which I then pick up in my parent component.

<template v-slot:default="slotProps">
  <b-modal ref="base-form-modal" :title="title" :no-close-on-backdrop="true" @ok.prevent="onSubmit">
    <validation-observer ref="observer" v-slot="{handleSubmit}">
      <b-form ref="form" @submit.stop.prevent="handleSubmit(onSubmit)">
        <slot />
      </b-form>
    </validation-observer>
  </b-modal>
</template>

<script>
import { ValidationObserver } from 'vee-validate'

export default {
  name: 'BaseFormModal',
  components: {
    ValidationObserver,
  },
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  data () {
    return {
      formData: {},
    }
  },
  methods: {
    async onSubmit () {
      let valid = await this.$refs.observer.validate()
      if (!valid) {
        return
      }
      this.$emit('submit', this.formData)
      this.$nextTick(() => {
        this.$refs['base-form-modal'].hide()
      })
      this.formData = {}
    },
    showModal () {
      this.$refs['base-form-modal'].show()
    },
  },
}
</script>

<style lang="scss" scoped>

</style>

In my page, I have a button which opens up the modal, like so:

<b-button variant="primary" @click="$refs['addOrgUserModal'].showModal()">
    <i class="far fa-plus" aria-hidden="true" /> {{ $t('organisation_settings_manage_users_add_user') }}
</b-button>

Then I have defined the base form modal component in my page as this:

<base-form-modal
  ref="addOrgUserModal"
  :title="$tU('organisation_settings_manage_users_add_user_modal_title')"
  @submit="addOrgUser"
>
  <b-row>
    <b-col md="6">
      <form-control-wrapper :rules="{required: true}" :label="$tU('first_name_label')">
        <b-form-input
          v-model="user.firstName"
          type="text"
          lazy-formatter
          :formatter="trimSpaces"
          :placeholder="$t('first_name_field_placeholder')"
        />
      </form-control-wrapper>
    </b-col>
    <b-col md="6">
      <form-control-wrapper :rules="{required: true}" :label="$tU('family_name_label')">
        <b-form-input
          v-model="user.familyName"
          type="text"
          lazy-formatter
          :formatter="trimSpaces"
          :placeholder="$t('family_name_field_placeholder')"
        />
      </form-control-wrapper>
    </b-col>
  </b-row>
</base-form-modal>