Multiple fields in one <validate> block?

[jezmck]

I'd like to have 3 validated inputs and have all their errors appear in the same place, after all the inputs.

Minimal replication: https://codepen.io/jezmck/pen/oNjyXBm

Only one of the inputs is validated, kinda. The message for the first input can appear when the second is invalid etc.

I don't know whether I'm missing something, but why is the name attributes ~mandatory~ available if there can only be 1 <field-messages> tag per <validate> tag?

[jezmck]

BTW, the only way I've found to achieve what I want is to have duplicate but hidden fields underneath the real ones:

<validate>
  <input class="hidden" v-model="model.dob.d" name="dob-d" required>
  <field-messages name="dob-d">
    <div slot="required">Please enter your birth date</div>
  </field-messages>
</validate>
<validate>
  <input class="hidden" v-model="model.dob.m" name="dob-m" required>
  <field-messages name="dob-m">
    <div slot="required">Please enter your birth month</div>
  </field-messages>
</validate>
<validate>
  <input class="hidden" v-model="model.dob.y" name="dob-y" required>
  <field-messages name="dob-y">
    <div slot="required">Please enter your birth year</div>
  </field-messages>
</validate>

but this doesn't get the required styling on the visible inputs.