Vue3 - Child data being lost after doing axios post call using the vee-validate 4 form wizard

Question

Has someone an idea why my child component AddressComponent.vue data is not being passed to my parent component?

MainForm.vue

    setup(props) {
            const addresses = ['mainAddress', 'secondAddress']
            const registrationData = reactive({
                        list_uuid: props.listUuid,
                        .....
                        email: '',
                        addresses: [],
            
            const addressValidationSchema = yup.object().shape({
                street: yup.string().required('Straatnaam is verplicht in te vullen.'),
                no: yup.string().required('Nummer is verplicht in te vullen.'),
                zip: yup.string().required('Zip is verplicht in te vullen.'),
                city: yup.string().required('City is verplicht in te vullen.')
            })
     
            const { handleSubmit, isSubmitting } = useForm();
            const onSubmit = handleSubmit(
                async (values) => {
                    try {
                    console.log(values)
                    console.log(registrationData)
                    const response = await axios.post('/api/v1/registration', registrationData)
     
                        if(response.data.success === true) {
                            setTimeout(() => {
                                    this.processing = false;
                                }, 3000
                            )
                            // this.$root.$emit('update-success', true);
                            // window.location.href = response.data.data;
                        }
                    } catch (error) {
                        responseMessage.value = 'An error occurred while sumitting the form.;'
                    }
                },
            )

      <FormWizard
        :validation-schema="
        (listType === 'PUBERS' ? validationSchemaPubers : validationSchemaLagereSchoolKinderen )
        " @submit="onSubmit">
 
 
<FormStep>
            <AddressComponent address="mainAddress" label="Domicilieadres" />
            <span>Gescheiden?</span><br>
            <ErrorMessage name="divorced" />
            <label for="divorced_yes">
                <Field name="divorced" id="divorced_yes" type="radio" :value="true" v-model="registrationData.divorced" /> Ja
            </label>
            <label for="divorced_no">
                <Field name="divorced" id="divorced_no" type="radio" :value="false"  v-model="registrationData.divorced"/> Nee
            </label>
            <AddressComponent v-if="registrationData.divorced" address="secondAddress" label="Adres indien gescheiden:" />
        </FormStep>

components/AddressComponent.vue

    <script>
import {useForm, Field, ErrorMessage} from 'vee-validate'
 
export default {
    name: "AddressComponent",
 
    components: {
        ErrorMessage,
        Field,
    },
    props: {
        label: {
            type: String,
            required: true
        },
        address: {
            type: String,
            default: '',
            required: true,
        }
    },
}
</script>
<template>
    <section class="address ">
        <h2 class="text-2xl font-extrabold">{{ label }}</h2>
        <div class="grid grid-cols-4 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
            <div>
                <label>Straat</label>
                <Field
                    id="street"
                    class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
                    type="text"
                    placeholder="Straat"
                    :name="`${address}.street`"
                    @input="$emit(`update:${address}.street`, $event.target.value)"
                />
                <ErrorMessage :name="`${address}.street`" class="text-purple font-bold" />
            </div>
            <div>
                <label>Nummer/bus</label>
                <Field
                    id="no"
                    class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
                    type="text"
                    placeholder="Nummer/Bus"
                    :name="`${address}.no`"
                    @input="$emit(`update:${address}.no`, $event.target.value)"
                />
                <ErrorMessage :name="`${address}.no`" class="text-purple font-bold" />
            </div>
            <div>
                <label>Stad/gemeente</label>
                <Field
                    id="city"
                    class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
                    type="text"
                    placeholder="Stad/gemeente"
                    :name="`${address}.city`"
                    @input="$emit(`update:${address}.city`, $event.target.value)"
                />
                <ErrorMessage :name="`${address}.city`" class="text-purple font-bold" />
            </div>
            <div>
                <label>Postcode</label>
                <Field
                    id="zip"
                    class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
                    type="text"
                    placeholder="Postcode"
                    :name="`${address}.zip`"
                    @input="$emit(`update:${address}.zip`, $event.target.value)"
                />
                <ErrorMessage :name="`${address}.zip`" class="text-purple font-bold" />
            </div>
        </div>
    </section>
</template>

components/FormWizard.vue (From vee-validate : composition api: https://vee-validate.logaretm.com/v4/examples/multistep-form-wizard/)

<template>
 
  <form @submit="onSubmit">
    <slot />
    <div class="grid grid-cols-2 gap-2">
 
      <button v-if="hasPrevious" type="button" @click="goToPrev" class="submit-btn ">
        Vorige
      </button>
 
      <button
          class="submit-btn col-end col-span- "
          type="submit"
      >
          {{ isLastStep ? 'Versturen' : 'Volgende' }}
      </button>
    </div>
     <pre>{{ values }}</pre>
  </form>
</template>
 
<script setup lang="ts">
import { useForm } from 'vee-validate';
import { ref, computed, provide } from 'vue';
 
const props = defineProps({
  validationSchema: {
    type: Array,
    required: true,
  },
});
 
const emit = defineEmits(['submit']);
const currentStepIdx = ref(0);
 
// Injects the starting step, child <form-steps> will use this to generate their ids
const stepCounter = ref(0);
provide('STEP_COUNTER', stepCounter);
 
// Inject the live ref of the current index to child components
// will be used to toggle each form-step visibility
provide('CURRENT_STEP_INDEX', currentStepIdx);
 
// if this is the last step
const isLastStep = computed(() => {
  return currentStepIdx.value === stepCounter.value - 1;
});
 
// If the `previous` button should appear
const hasPrevious = computed(() => {
  return currentStepIdx.value > 0;
});
 
// extracts the indivdual step schema
const currentSchema = computed(() => {
  return props.validationSchema[currentStepIdx.value];
});
 
const { values, handleSubmit } = useForm({
  // vee-validate will be aware of computed schema changes
  validationSchema: currentSchema,
  // turn this on so each step values won't get removed when you move back or to the next step
  keepValuesOnUnmount: true,
});
 
// We are using the "submit" handler to progress to next steps
// and to submit the form if its the last step
const onSubmit = handleSubmit((values) => {
    console.log(values);
    console.log(isLastStep);
  if (!isLastStep.value) {
    console.log('last step')
 
    currentStepIdx.value++;
 
    return;
  }
 
  // Let the parent know the form was filled across all steps
  emit('submit', values);
});
 
function goToPrev() {
  if (currentStepIdx.value === 0) {
    return;
  }
 
  currentStepIdx.value--;
}
</script>

Steps to reproduce It's super weird, when I do the Axios post call my values are gone from the parentComponent data. So I checked some more on this:

• I use vee-validate4
• I use the form wizard
• The formWizard component at the bottom of the paste has the address data: line 239 When I do the axios call they are not in my registrationData

In short words: Why is my address data not popuplated to my parent const registrationData ?