Quasar (Vue.js) q-form does not validate input in child component

Question

I use Quasar's (Vue.js) q-form with inputs that need validation e.g. required.

I need to make a reusable Vue component with multiple inputs, making the site more consistent and easy to maintain.

When I use Quasar's q-input (text2) in the same Vue component as q-form (Index.vue), the input validation is triggered when submit button is clicked, but the validation is skipped for the input in the child component (TextComponent / text1):

<q-form ref="form" @submit="onSubmit" @reset="onReset">
      <TextComponent :text.sync="text1" label="Text 1 *"></TextComponent>

      <q-input
        filled
        v-model="text2"
        label="Text 2 *"
        style="width: 250px"
        lazy-rules
        :rules="[(val) => (val && val.length > 0) || 'Required']"
      />

      <div>
        <q-btn label="Submit" type="submit" color="primary" />
        <q-btn
          label="Reset"
          type="reset"
          color="primary"
          flat
          class="q-ml-sm"
        />
      </div>
</q-form>

Childcomponent (TextComponent.vue):

<q-input
    filled
    :value="text"
    :label="label"
    lazy-rules
    style="width: 250px"
    :rules="[(val) => (val && val.length > 0) || 'Required']"
    @input="$emit('update:text', $event)"
  />

I have created a small sample project with the src/pages/Index.vue and TextComponent.vue on codesandbox.io: https://codesandbox.io/s/still-cache-pzu3g?file=/src/pages/Index.vue

Does anyone know how to tackle this problem?