A non-Vue form made up of multiple Vue components. How to do it right?

Question

Vue.js

There is a regular form that is not a vue component. It displays several vue components in a loop:

<form action="someUrl" method="post">
@foreach($questions as $question)
   {{ $question->title }}
   <answer :id="{{ $question->id }}"></answer>
   <file-uploader :id="{{ $question->id }}"></file-uploader>
@endforeach
<button type="submit">Send</button>
</form>

Each component can validate itself. Question:
How to prevent the form from submitting data if some component is invalid?
PS: I'm more interested in the correctness of the approach as a whole. Is it necessary in such cases to wrap everything in a separate component, the meaning of which is simply the validation of child ones? Is there a way to create a generic bean that, as a parent, will just take care of validating the children (slots?)?
Again, if you create a single component, within which many children are displayed, then you first need to pass a lot of data inside the parent so that it has already created everything. And in general it turns out one form = one additional component.
In short, the right practices are of interest!