VeeValidate validating a non-existent field error even with key

[ghost]

Versions

• vee-validate: 2.2.9
• vue: 2.6.10

Describe the bug

I have a "select" and "text" to switch from. When I close the my modal, I run this : this.$validator.reset();

The problem is that I get the error : "Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#29". Use "attach()" first." if I open the modal by editing a row with dynamic field of type "a" and then editing a row of type "b"

To reproduce

`


Catégorie du soin*

                            <!-- List or typing -->
                            <template v-if="vCatState === 'list'">
                                <b-col sm="7">
                                    <b-form-select key="a" v-model="vCategorie" id="categorySoin"
                                     @change="changeListOfServices(vCategorie)" v-validate="'required'" name="catégorie liste">

                                        <option></option>
                                        <option v-for="categoriesoin in categoriesoins" :key="categoriesoin.id" v-bind:value="categoriesoin.id">
                                            {{categoriesoin.name}}
                                        </option>
                                        
                                    </b-form-select>
                                    <span>{{ errors.first('catégorie liste') }}</span>
                                </b-col>
                            </template>
                            <template v-else-if="vCatState === 'typing'">
                                <b-col sm="7">
                                    <b-form-input key="b" type="text" v-model="vCat" id="catSoin"
                                    v-validate="'required'" name="catégorie texte"
                                    />
                                    <span>{{ errors.first('catégorie texte') }}</span>
                                </b-col>
                            </template>

                            <b-col sm="2">
                                <b-button @click="catSoin()">
                                    <font-awesome-icon icon="pen-square"/>
                                </b-button>
                            </b-col>
                        </b-row>`

Expected behavior

I hoped that : "this.$validator.reset();" would handle switching between dynamic fields if they had a key.

Desktop (please complete the following information):

• W10
• Chrome
• Version 74.0.3729.169

Additional context

I've been trying to get this to work for a moment now but I haven't figured out a solution. I've read about the VeeValidate dynamical fields but it didn't help either.

[yncardoso]

The same issue here, it was working fine a few days ago, not too sure what has happened.

• Just downgraded the version to version 2.17 (the initial one) and everything is working fine.

[logaretm]

The directive timing issues is hard to pinpoint and fix completely. I suggest moving to ValidationProvider component as it is more robust and doesn't have the common issues of a directive.

The directive will be deprecated in v3

[tbredin]

This bug is still present as far as I can tell — we're seeing this issue when used in a modal and a collapsible accordion