Devextreme vue 3 js ruling sync multiple DxDateBox component

Question

I am using DxDateBox component for my Vue 3 project. I have 2 DxDateBox. StartDate should be smaller than EndDate. I wrote a rule for each one of them. Rules work for their own component.

But when I update date of EndDate, if StartDate is okay, rule doesn't confirm StartDate okay. It is the same for opposite prop. I want when I update one of them, all DxDateBox component's rule will work and review the value of 2 DxDateBox component.

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

Answer 1

For this, All component should be rendered after all changes. You should give keys for each component and watch for every changes. When components value changed, you should update key of other component. I recommend you should increase 1 for every changes. The result of this, when component's value changed, other component's key will change and will be rendered and rule will work again