Vee-validate v3 accessing flags of providers

Question

I'm using Vee-Validate v3 library for validations. I'd like to display second div if the first validationprovider has validated flag (which means validated once)

How should I fill v-if in second div?

<ValidationObserver
    v-slot="{ pristine, invalid }"
    @submit.prevent="handleSubmit"
    tag="form"
    ref="observer"
>
    <div>
        <ValidationProvider
            rules="required"
            v-slot="{ errors }"
            vid="contactmethod"
        >
            input element here
        </ValidationProvider>
    </div>
        
    <div v-if="ValidationProvider of CONCTACTMETHOD has VALIDATED flag">
        <ValidationProvider
            rules="required"
            v-slot="{ errors }"
            vid="methodone"
        >
            input element here
        </ValidationProvider>
    </div>
</ValidationObserver

Answer 1

You can do that using ref of your previous ValidationProvider and using the value valid or invalid :

<ValidationObserver
    v-slot="{ pristine, invalid }"
    @submit.prevent="handleSubmit"
    tag="form"
    ref="observer">
    <div>
        <ValidationProvider
            ref="contactmethod"
            rules="required"
            v-slot="{ errors }"
            vid="contactmethod">
            input element here
        </ValidationProvider>
    </div>
        
    <div v-if="$refs.contactmethod.valid">
        <ValidationProvider
            rules="required"
            v-slot="{ errors }"
            vid="methodone">
            input element here
        </ValidationProvider>
    </div>
</ValidationObserver>