<v-text-field
    density="compact"
    v-model="textMaterial"
    :rules="textMaterialRules"
    label="Text Material"
></v-text-field>

This is a simple example of how I am using v-text-field in a with a at the bottom of type submit which triggers the rule output to be displayed. The rules are defined as:

export default defineComponent({
  data() {
    return {
      textMaterial: '',
      textMaterialRules: [
        (value: string | undefined) => {
          if (value?.length != 0) return true

          return 'An error message.'
        }
      ]
    }
}

This works fine when testing manually. But testing using vitest I am not able to find the element which displays the rule output. Its class seems to be .v-messages__message.

it('displays error message', async () => {
    const wrapper = mount(Page);
    await wrapper.vm.$nextTick();

    const submitButton = wrapper.find('v-btn[type="submit"]');
    expect(submitButton.exists()).toBe(true);
    
    await submitButton.trigger('click');
    await wrapper.vm.$nextTick();

    // TODO: not able to find v-messages__message elements
    // expect(wrapper.find('v-messages__message').text()).toContain('the error message above.');
});

Any help will be appreciated, I have been stuck on this for so long.
I have tried getting v-form from wrapper.find() and figure out something but nothing good came out of it.
wrapper.html() returns only html with v-form and v-text-field so I am thinking is there no way of getting this data from this wrapper and there is something else that I am not aware of to be done to make this text work.