如何验证动态表单vee-validate

Question

我在v-内有一个动态日期选择器，用于预填充数据，这些数据来自带有etd和eta的API表单，并且我想确保eta总是在etd之后或等于。如何在vee-validate中做到这一点？

我尝试过

<div class="d-flex">
          <div class="mx-5">
            <p>
              <strong>ATD</strong>
            </p>
            <el-form-item :prop="'voyage.'+index+'.atd'"
            :error="errors.first('atd-'+index)">
              <el-date-picker
              :name="'atd-'+index"
              v-validate="{
                required: true,
                before: `target-${index}`,
                }"
              data-vv-as="ATD"
              v-model="formFinalise.voyage[index].atd"
              type="date"
              :placeholder="voyage.atd |
              formatDate('DD-MM-YYYY')"></el-date-picker>
            </el-form-item>
          </div>
          <div class="mx-3">
            <p>
              <strong>ETA</strong>
            </p>
            <el-form-item :prop="'voyage.' + index + '.eta'"
            :error="errors.first('eta-'+ index)">
              <el-date-picker
              :name="'eta-' + index"
              data-vv-as="ETA"
              v-validate="{
                required: true,
              }"
              :ref="`target-${index}`"
              v-model="formFinalise.voyage[index].eta"
              type="date"
              :placeholder="voyage.eta |
              formatDate('DD-MM-YYYY')"></el-date-picker>
            </el-form-item>
          </div>

API数据：

"voyages": [
        {
            "orderNo": 1,
            "vesselName": "dunhu",
            "voyageNo": "mein",
            "portId": null,
            "atd": "2019-10-21T12:34:08.463Z",
            "eta": "2019-10-21T12:34:08.463Z"
        },
        {
            "orderNo": 2,
            "vesselName": "seafood77",
            "voyageNo": "zzz9",
            "portId": 2,
            "atd": "2019-10-21T12:34:08.463Z",
            "eta": "2019-10-21T12:34:08.463Z"
        }
    ]

，但是在页面加载完成后，验证不会立即运行。反正有什么解决办法？