Quasar (Vue.js) q-form 不验证子组件中的输入

如何解决Quasar (Vue.js) q-form 不验证子组件中的输入

我将 Quasar (Vue.js) q-form 与需要验证的输入一起使用，例如需要。

我需要制作一个具有多个输入的可重用 Vue 组件，使网站更加一致且易于维护。

当我在与q-form（Index.vue）相同的Vue组件中使用Quasar的q-input（text2）时，点击提交按钮时会触发输入验证，但对于子项中的输入跳过验证组件 (TextComponent / text1):

<?php

namespace App\Models\Organization;

use Carbon\Carbon;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Company extends Model
{
    public $timestamps = false;
    protected $table = 'companies';

    protected $primaryKey = 'id';

    protected $fillable = [
                'id','company_name','address1','address2','org_head','created_by','created_at','updated_by','updated_at','is_active'
            ];
    public function users()
    {
        return $this->hasMany('App\User');
    }
 }

子组件（TextComponent.vue）：

<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>

我在 codeandbox.io 上创建了一个包含 src/pages/Index.vue 和 TextComponent.vue 的小型示例项目：https://codesandbox.io/s/still-cache-pzu3g?file=/src/pages/Index.vue

有人知道如何解决这个问题吗？