(Bootstrap) Vue Datepicker: How to define start and end date, so that the end date can't be before the start date?

[polinasch]

I have two BootstrapVue datepickers in my form in Vue.js. I’d like to implement a holiday manager, so you can define the start (input-3) and end date (input-4) of your holiday. The end date should be greater or equal to the start date. My current implementation looks as follows:

<b-form-group
      id="input-group-3"
      label="Anfangsdatum:"
      label-for="input-3"
>
<b-form-datepicker
      id="input-3"
      v-model="von"
      placeholder="Anfangsdatum auswählen"
      required
      :min="minAnfang"
></b-form-datepicker>
</b-form-group>

<b-form-group id="input-group-4" label="Enddatum:" label-for="input-4">
<b-form-datepicker
     id="input-4"
     v-model="bis"
     placeholder="Enddatum auswählen"
     :min="minEnde"
     required
></b-form-datepicker>
</b-form-group>

The data part in Vue is implemented as follows:

data() {
    const datum = new Date();
    const datum_heute = new Date(datum.getFullYear(), datum.getMonth(), datum.getDate());
    
    const minVon = new Date(datum_heute);
    minVon.setDate(minVon.getDate()+ 1);

    const minBis = new Date(datum_heute);
    minBis.setDate(minVon.getDate()+1);

    return {
        Urlaubsart: "",
        Grund: "",
        von: "",
        bis: "",
        Status: "",
        BenutzerID: 24,
        minAnfang: minVon,
        minEnde: minBis,
      arten: [
        { value: null, text: "Wählen Sie die Urlaubsart aus" },
        { value: "Urlaub", text: "Urlaub" },
        { value: "Sonderurlaub", text: "Sonderurlaub" },
      ],
      gruende: [
        { value: "Umzug", text: "Umzug" },
        { value: "Hochzeit", text: "Hochzeit" },
        { value: "Geburt", text: "Geburt" },
        { value: "Umzug", text: "Sonstiges" },
      ],
      Urlaubstage: "",
    };
  }

So how can I ensure, that the end date is equal to the start date or greater?