vuelidate: Vue 3 + vuelidate@next: $v.$error remains false

I’m using Vue 3 and Vuelidate@next and while $v.$invalid works $v.$error and $v.$dirty always remain false even though the individual validators show true (i.e. $v.password.$error returns true).

Sorry, couldn’t figure out how to create a jsFiddle with vuelidate@next, but here is my relevant html and js:

  <input v-model.trim="$v.email.$model"/>
  <input v-model.trim="$v.password.$model"/>

  data() {
    return {
      email: '',
      password: '',
    };
  },
  validations: {
    email: { required },
    password: { required },
  },

Here is my full vue component if needed:

<template>
<div>
  <h2 class="header">Sign In</h2>
  $v.$error: {{$v.$error}}<br/>
  $v.$invalid: {{$v.$invalid}}<br/>
  $v.$dirty: {{$v.$dirty}}<br/>
  $v.$anyError: {{$v.$anyError}}<br/>
  $v.$anyInvalid: {{$v.$anyError}}<br/>
  $v.$anyDirty: {{$v.$anyDirty}}<br/>
   $v.password.$error: {{ $v.password.$error }}<br/>
  <form @submit="signIn" autocomplete="off" novalidate>
    <div class="form-group" :class="{ 'error' : $v.email.$error }">
      <label for="email">Email:</label>
      <!-- <em v-if="$v.email.$error && $v.email.email.$invalid">Invalid Email</em> -->
      <em v-if="$v.email.$error && $v.email.required.$invalid">Required</em>
      <input v-model.trim="$v.email.$model"/>
    </div>
    <div class="form-group" :class="{ 'error' : $v.password.$error }">
      <label for="password">Password:</label>
      <em v-if="$v.password.$error">Required</em>
      <input v-model.trim="$v.password.$model"/>
    </div>
    <div class="form-group buttons" >
      <button type="button" @click="cancel()">Cancel</button>
      <button class="save" type="submit" :disabled="$v.$errors.length > 0">
        Sign In
      </button>
    </div>
  </form>
</div>
</template>

<script>
import { required } from '@vuelidate/validators';

export default {
  name: 'SignIn',
  data() {
    return {
      email: '',
      password: '',
    };
  },
  validations: {
    email: { required },
    password: { required },
  },
  methods: {
    signIn(credentials) {
      this.userRepository.signIn(credentials)
        .subscribe(
          null,
          (err) => { console.$error(err, 'Error'); },
          () => this.router.navigate(['/catalog']),
        );
    },
    cancel() {
      this.router.navigate(['/']);
    },
  },
};

</script>

<style scoped>
form {
  color: #336699;
  font-size:18px;
  padding:30px;
  width: 298px;
  margin: 0 auto;
}
input {
  display: block;
  font-size:18px;
  padding-left:10px;
  width: 275px;
}
button {
  font-size: 24px;
  color: #336699;
}
button:disabled {
  color: #999999;
}
.header {
  color: #336699;
  text-align:center;
  padding-top:20px;
  margin-top:0;
}
.form-group {
  margin: 10px;
}
.buttons {
  text-align: right;
  margin-right: 0px;
}
.save {
  background-color: #CCDDFF;
  border-color: #CCDDFF;
}
em {float:right; color:#E05C65; padding-left:10px;}
.$error input, .$error select, .$error textarea {background-color:#E3C3C5;}
.$error ::-webkit-input-placeholder { color: #999; }
.$error :-moz-placeholder { color: #999; }
.$error ::-moz-placeholder { color: #999; }
.$error :ms-input-placeholder  { color: #999; }
</style>