Devextreme vue 3 js управляет синхронизацией нескольких компонентов DxDateBox

Я использую компонент DxDateBox для своего проекта Vue 3. У меня 2 DxDateBox. StartDate должно быть меньше, чем EndDate. Я написал правило для каждого из них. Правила работают для своего компонента.

Но когда я обновляю дату EndDate, если StartDate в порядке, правило не подтверждает StartDate в порядке. То же самое для противоположной опоры. Я хочу, чтобы при обновлении одного из них правило всех компонентов DxDateBox работало и проверяло значение компонента 2 DxDateBox.

<template>

<DxDateBox  type = "date" displayFormat = "dd/MM/yyyy" v-model = "StartDate" >
   <DxValidator>
     <DxCustomRule
       message = "Should be smaller than Visa End Date" 
       :validation-callback = "startDateRule"
       :reevaluate = "true"/>
     </DxValidator>
</DxDateBox>

<DxDateBox  type = "date" displayFormat = "dd/MM/yyyy" v-model = "EndDate" >
  <DxValidator>
    <DxCustomRule
       message = "Should be bigger than Visa Start Date" 
      :validation-callback = "endDateRule"
      :reevaluate = "true"/>
   </DxValidator>
</template>

<script>
import {
    DxValidator,
    DxCustomRule
} from 'devextreme-vue/validator';
import DxDateBox from "devextreme-vue/date-box";


export default{
components:{
    DxDateBox,
    DxValidator,
    DxCustomRule,
},
data() {
    return {
      StartDate: new Date()
      EndDate: new date()
}},
methods:{
startDateRule(e){
      if ((e.value <=this.EndDate)||(this.StartDate<=this.EndDate )){
        return true}
    },
    endDateRule(e){
      if ((e.value>=this.StartDate )|| (this.EndDate>=this.StartDate)){
        return true}
    },
}
}
</script>