Check pristine flags in component template

[lucianobosco]

I'm not sure how to even ask about this, I hope I'm clear enough, but I'm facing an issue when trying to show a warning as per pristine flag:

<div v-if="!$refs.form.fields.locale.pristine">My warning message</div>

When component is mounted I'm getting
Error in render: "TypeError: Cannot read property 'fields' of undefined

The $refs.form refer to the validation observer, and the only way to make this work is by adding more conditionals which looks really bad

<div v-if="$refs.form && $refs.form.fields.locale && !$refs.form.fields.locale.pristine">My warning message</div>

I also tried using a computed property but it faces an issue where nothing is returned.

showWarning () { return this.$refs.form && this.$refs.form.fields.locale && !this.$refs.form.fields.locale.pristine }

Any advice about checking flags will be appreciated.

Thanks in advance

[lucianobosco]

Never mind, just too tired and trying to re-invent the wheel.
I've realized that it can be easily done by using pristine prop within validationProvider since the warning is directly related to a multi-select.
So this is the way:

<ValidationProvider vid="locale" v-slot="{ pristine }">
    <multiselect
        :options="opt_locales"
        v-model="resource.profile.locale">
    </multiselect>
    <div v-if="!pristine">My warning message</div>
</ValidationProvider>

Feel free to close this discussion.