VueJS — запустить код после успешного создания события

Я пытаюсь очистить форму в дочернем компоненте после того, как событие, содержащее введенные данные формы, было успешно передано из дочернего в родительский компонент. Однако я заметил, что форма очищается до того, как данные передаются через событие родительскому компоненту, так что событие передает пустые значения родительскому компоненту. Я попытался отложить clearForm() с помощью тайм-аута, но это не помогло. Есть ли способ изменить поведение таким образом, чтобы функция clearForm() выполнялась только после завершения события и сохранения данных?

Прилагается код.

Дочерний компонент

<template>
    <!-- Contains a form -- >
</template>

<script>
export default {
    
    data() {
        return {
            additionalInfo: 
                {
                    id: new Date().toISOString(),
                    fullName: '',
                    preAuthorize: '',
                    serviceAddress: ''
                },
            validation: {
                fullNameIsValid: true,
                serviceAddressIsValid: true
            },
            formIsValid: true,
            addServiceButtonText: '+ Add Service Notes (Optional)',
            serviceNotes: [],
            showServiceNotes: false,
            enteredServiceNote: '', //service notes addendum
        }
    },
    computed : {
        // something
    },
    methods: {
        
        setServiceNotes(){
            this.showServiceNotes = !this.showServiceNotes;
        },
        addAnotherParty(){
            this.validateForm();
            if (!this.formIsValid){
                return;
            }
            this.$emit('add-parties', this.additionalInfo); //event
            console.info(this.clearForm);
        },
        
        clearForm(){
            this.additionalInfo.fullName = '';
            this.additionalInfo.serviceAddress = '';
            this.additionalInfo.preAuthorize = false;
        }
    }
}
</script>

Родительский компонент

<template>
    <div>
        <base-card 
        ref = "childComponent"
        @add-parties = "updateAdditionalInfoList">
            <!-- Wrapper for the `Parties Being Served` component-->
                <template v-slot:title>
                    <slot></slot>
                </template>

        </base-card>
    </div>
    
</template>
<script>
export default {
    data() {
        return {
            hasElement: false,
            selectedComponent: 'base-card',
            additionalInfoList : [],
            clearForm: false
        }
    },
    methods: {
        updateAdditionalInfoList(additionalInfo){ //save changes passed via event
            this.additionalInfoList.push(additionalInfo);
            console.info('emitted');
            console.info(this.additionalInfoList);    
            setTimeout(() => {
                this.$refs.childComponent.clearForm();  //clear the form in child
            }, 2000);
            
        }
    }
}
</script>