vuejs3 - Vue 3 root validation result different form validation - Stack Overflow

I am migrating my project to Vue3. I am using vuelidate. Here is an example input form component from my project.

<template>
  <div id="simpleCampaignForm">
    <v-container fluid class="mb-4">
      <v-form>
        <v-row>
          <v-col>
            <v-text-field
              v-model="form.name"
              label="* Name"
              :error-messages="errorMessage(v$.form.name, 'Name')"
              :counter="255"
              @input="fieldUpdated(eventName, v$.form.name, true)"
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-text-field
              v-model="form.description"
              label="* Description"
              :error-messages="errorMessage(v$.form.description, 'Description')"
              @input="fieldUpdated(eventName, v$.form.description, true)"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-form>
    </v-container>
  </div>
</template>

<script>
import { maxLength, required } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';

export default {
  name: 'SimpleCampaignForm',
  data() {
    return {
      form: {
        name: null,
        description: null,
      },
      eventName: 'form-updated',
    };
  },
  setup() {
    return { v$: useVuelidate() };
  },
  validations: {
    form: {
      name: { required, maxLength: maxLength(255) },
      description: { required },
    },
  },
  methods: {
    errorMessage(validation, fieldName) {
      if (!validation.$pending && !validation.required) {
        return `${fieldName} is required.`;
      }
      if (!validation.$pending && !validation.maxLength) {
        return `${fieldName} must be at most ${validation.$params.maxLength.max} characters.`;
      }
      return '';
    },
    fieldUpdated(eventName, validation, isInput) {
      if (isInput) {
        validation.$touch();
      }
      this.$emit(eventName, {
              data: this.form,
              isValid: !this.v$.$invalid
            });
    },
  },
};
</script>

this.v$.$invalid keeps being true even though I put valid inputs. I realized that this.v$.form.$invalid works as expected. In vue2 it was working fine. However, in vue3 somehow it doesn't work as expected. Why does root validation return invalid while form is valid and there is no other validation rules?