Vue not updating DOM with vee-validate errors while testing

Question

I am trying to test whether validations error show up. They do show up in the browser. However, my tests are failing. This is my code:

import {shallowMount, createLocalVue} from '@vue/test-utils'
import SignUpUser from '@/components/SignForms/SignUpUser.vue'
import VueRouter from 'vue-router'
import VeeValidate from 'vee-validate'
import flushPromises from 'flush-promises';

const localVue = createLocalVue()
localVue.use(VueRouter)
localVue.use(VeeValidate)
const router = new VueRouter()

test('displays error message when validations fail', async () => {
  const wrapper = shallowMount(SignUpUser, {
    localVue,
    router,
  })

  wrapper.find('#username').setValue('');
  const text = wrapper.findComponent('#username-error')

  await flushPromises();
    expect(text.textContent).toBeTruthy()

})

I think that Vue is not updating the DOM with the error messages and I don't understand why.

The component looks like this:

            <input
              id="username"
              v-model="username"
              v-validate="'required|alpha_dash'"
              name="username"
              type="text"
              placeholder="Eg: harinepali123"
            >
            <p class="form_error" id='username-error'>
              {{ errors.first("username") }}
            </p>