VeeValidate doesn't validate inputs from a dynamic form

Question

I'm trying to generate dynamic forms with validations using veeValidate in vuejs, the way Im trying to do this is by creating an array of objects inside the data of the component for example:

data(){
   return{
inputs: [
      {
        id: 1,
        label: "first name",
        type: "text",
        placeholder: "",
        model: "",
        rules: "required"
      },
      {
        id: 2,
        label: "last name",
        type: "text",
        placeholder: "",
        model: "",
        rules: "required"
      } ]
   }
}

And for the html:

  <ValidationObserver v-slot="{ handleSubmit }">
    <b-form @submit.prevent="handleSubmit(onSubmit)" class="p-5">
      <div v-for="inp in inputs" v-bind:item="inp" :key="inp.id">
        <ValidationProvider name="Value" :rules="inp.rules" v-slot="validationContext">
          <b-form-group
            :id="'input-group-'+inp.id"
            :label="inp.label"
            :label-for="'input-'+inp.id"
            label-cols="4"
            label-cols-lg="2"
          >
            <div v-if="inp.type != 'select'">
              <b-form-input
                :type="inp.type"
                :placeholder="inp.placeholder"
                v-model="inp.model"
                :id="'input-'+inp.id"
                :name="'input-'+inp.id"
                :state="getValidationState(validationContext)"
                aria-describedby="input-1-live-feedback"
              ></b-form-input>
              <b-form-invalid-feedback
                :id="'input-'+inp.id+'-live-feedback'"
              >{{ validationContext.errors[0] }}</b-form-invalid-feedback>
            </div>
          </b-form-group>
        </ValidationProvider>
      </div>

      <button type="submit">Submit</button>
    </b-form>
    <div>
      Look at the output
      {{show}}
    </div>
  </ValidationObserver>

And this works fine when trying to generate the inputs dynamically on the html. But the problem comes when I try to add form validation to that dynamic form. What I expect/want to do: Assuming the form has a submit button, what i expect to happen if the inputs have the 'required' validation, is that if i press the button without typing anything first, all inputs should show a warning saying "this input is required" or something like that.

The problem: what really happens is that when you press the submit button without typing something in the inputs, only the last input shows the warning message.

Here is the codeSandbox link of the example im talking about: https://codesandbox.io/s/codesandbox-733yf?fontsize=14&hidenavigation=1&theme=dark&file=/src/Demo.vue

Answer 1

When you're working inside a v-for it's best practice (and apparently necessary) to identify your ValidationProviders with a vid, like this:

    <ValidationProvider :vid="'vp'+inp.id" name="Value" :rules="inp.rules" v-slot="validationContext">

I was able to see all your error messages when I added that to your example.