Use FormValidator on DateRangePicker

Any guidance on how to use the DateRangePicker with the FormValidator?  Binding to value on the component does not seem to apply changes to the underlying value which leaves startDate and endDate to bind too, but I can't find a way to line up the name of the validation rule with the component given that it is 2 properties.

[index.vue]  <template>      <div class="wrap">          <form id="form-element" class="form-horizontal">              <div class="form-group">                  <div class="col-sm-3 control-label">Select Range</div>                  <div class="col-sm-6">                      <ejs-daterangepicker id="daterangepicker" width="450px" name="date" class="form-control" placeholder="Select a range"></ejs-daterangepicker>                      <div class="error-element"></div>                  </div>              </div>          </form>      </div>  </template>  <script>  import Vue from 'vue';  import { DateRangePickerPlugin } from '@syncfusion/ej2-vue-calendars';  import { FormValidator } from "@syncfusion/ej2-vue-inputs";  import { queryParams } from "@syncfusion/ej2-base";  import { throws } from "assert";    Vue.use(DateRangePickerPlugin);  export default {    mounted() {        var options = {        rules: {          date: { required: true }        },        customPlacement: function(element, errorElement) {          document.querySelector(".error-element").appendChild(errorElement);        },      };       // defines FormValidator to validate the dateRangePickerPicker          var formObject = new FormValidator("#form-element", options);    }  }  </script>

Christo