JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@3.0.2/dist/vue.global.js"></script>
<script src="https://unpkg.com/mitt@2.1.0/dist/mitt.umd.js"></script>
<div id="app">
    <form-component>
        <one></one>
        <two></two>
        <three></three>
    </form-component>
</div>

JavaScript

const emitter = mitt();

const ChildComponent = {
    setup(props, { emit }) {
        emitter.on('submit', () => {  
            console.log('Child submit event handler!');

            if (props && props.rules) {
                emit('validate');
            }
        });
    },
};

function makeChild(name) {
    return {
        ...ChildComponent,
        template: `<input value="${name}" />`,
    };
}

const formComponent = {
    template: `
        <form @submit.prevent="handleSubmit">
            <slot></slot>
            <button type="submit">Submit</button>
        </form>
    `,

    setup() {
        const handleSubmit = () => emitter.emit('submit');
        return { handleSubmit };
    },
};

const app = Vue.createApp({
    components: {
        formComponent,
        one: makeChild('one'),
        two: makeChild('two'),
        three: makeChild('three'),
    }
});

app.mount('#app');