meta flag issue with vue v3.2.0-beta.x

[logaretm]

What happened?

Looks like some tests are failing in 3.2.0-beta.x releases related to meta flags

reported originally in #3400 by @cexbrayat

While testing Vue v3.2.0-beta.1 on our projects, we ran into some issues with VeeValidate. This is easily reproducible by bumping the repo to use the lastest Vue beta, and unit tests start to fail (meta flag is not properly updated).

There are some changes in Vue reactivity, so maybe something needs to be updated on VeeValidate side, or maybe this is a regression in Vue itself, but I haven't dig deeper.

Reproduction steps

1. Upgrade vee-validate repo Vue to 3.2.0-beta.1
2. Run yarn test
3. See failing tests

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

It doesn't look like a reactivity issue as I noticed there is an extra validation run that was being run at the end of a reset state call and making those 2 tests fail, but reactivity-wise it seems to be working as expected.

Found a workaround to avoid it, but no clue what is causing it. I Will do a quick tag.

[logaretm]

@cexbrayat I Tagged 4.4.7 with this change, currently all tests pass so I assume all is well on your side?

[cexbrayat]

Thanks for looking into this! Sadly not yet.

I put together a small repro cexbrayat/vue-v313#3

The component is

<Field name="name" rules="required" v-slot="{ field, meta }" v-model="user.name">
  <label for="name-input" :class="{ 'text-danger': meta.dirty && !meta.valid }">Name</label>
  <input id="name-input" :class="{ 'is-invalid': meta.dirty && !meta.valid }" v-bind="field" />
</Field>

and the problem is quite weird: text-danger is properly applied on the label when the field is invalid, but not is-invalid on the input.
If you downgrade the repro to Vue v3.1.3, it works as expected.

[logaretm]

Doesn't look related to vee-validate, the class binding seems to get borked for some reason

On a quick hunch, if you make the class binding after the v-bind it works fine.

<input id="name-input"  v-bind="field" :class="{ 'is-invalid': meta.dirty && !meta.valid }" />

Probably worth reporting in the Vue repo

[cexbrayat]

Good catch! I managed to repro without vee-validate 👍
Tracked in vuejs/core#4155