Wrapping a ValidationObserver around a v-for loop - vue.js

Question

I have a v-for loop that allows me to dynamically add new fields to my form. This loop is within a tab which I need to validate before I go onto the next section of my form. It seems as though nothing renders when I place the v-for within my validation observer. Is there another way to accomplish this?
I'm using VeeValidate 3
<template>
<div>
<b-card class="mb-3">
<ValidationObserver :ref="'contact_obs'" v-slot="{ invalid }">
<div
v-for="(contact, index) in this.applicant.contacts"
:key="contact.id"
role="tablist"
>
<b-form-row>
<BTextInputWithValidation
rules="required"
class="col-md-4"
:label="
$t('contact_name', { name: applicant.contacts[index].title })
"
:name="$t('contact_name')"
v-model="applicant.contacts[index].name"
description
placeholder
/>
<BTextInputWithValidation
rules
class="col-md-4"
:label="$t('contact_title')"
:name="$t('contact_title')"
v-model="applicant.contacts[index].title"
description
placeholder
/>
<BTextInputWithValidation
rules
class="col-md-3"
:label="$t('contact_email_address')"
:name="$t('contact_email_address')"
v-model="applicant.contacts[index].email"
description
placeholder
/>
<b-button
variant="outline-danger"
class="float-right mt-4 mb-4 ml-3"
v-on:click="deleteContact(index)"
>
<span class="fas fa-user-minus"></span>
</b-button>
</b-form-row>
</div>
</ValidationObserver>
<b-button
variant="outline-success"
class="float-right mt-4 mb-4 ml-3"
v-on:click="addContact"
>
<span class="fas fa-user-plus"></span>
</b-button>
</b-card>
</div>
</template>
<script>
import { ValidationObserver } from 'vee-validate'
import VeeValidate from 'vee-validate'
import BTextInputWithValidation from './inputs/BTextInputWithValidation'
let id = 10
export default {
components: { ValidationObserver, BTextInputWithValidation },
mounted() {},
data: function() {
return {
applicant: {
contacts: [
{
id: '1',
name: '',
title: 'Primary Principal',
email: ''
},
{
id: '2',
name: '',
title: 'Secondary Principal',
email: ''
},
{
id: '3',
name: '',
title: 'Accounts Receivable',
email: ''
}
]
}
}
},
methods: {
addContact: function(params) {
this.applicant.contacts.push({
id: id,
name: '',
title: '',
email: ''
})
id++
},
deleteContact: function(index) {
this.$delete(this.applicant.contacts, index)
},
validate() {
const isValid = this.$refs.contact_obs.validate()
if (isValid) {
this.$emit('on-validate', this.$data, isValid)
}
return isValid
// return true
}
}
}
</script>
<style lang="scss" scoped></style>

Answer 1

I believe the problem is here:
v-for="(contact, index) in this.applicant.contacts"
In general you should avoid using the this. prefix to access properties in templates but usually it does no harm. This is one of those cases where it actually does break something. this does not refer to the correct object inside a scoped slot.
I'm surprised you don't see an error in your console.