v-model won't detect changes made by jQuery trigger event

Question

With Vue.js I'm using jQuery Tempus Dominus datepicker.

<input type="text"
       class="form-control datetimepicker-input"
       id="confirmedDueDate"
       data-target="#confirmedDueDate"
       @focus="openDatetimePicker($event)"  //to show the datetimepicker
       @blur="closeDateTimePicker($event)"  //to close it
       v-model="taskSettings.confirmedDueDate"
       />

I'm facing the following issue: v-model won't detect changes made by the datetimepicker.

I thought I could trigger an event when closing the picker with :

$('#confirmedDueDate').trigger('change');
//or
$('#confirmedDueDate').trigger('input');

but with this is not working.

Is there a known workaround for such cases?

Answer 1

The command

$('#confirmedDueDate').trigger('input');

Triggers a jQuery.Event Object which Vue will not recognize, since it only knows native DOM events.

You can trigger "manually" an event that Vue will respond to using:

$('#confirmedDueDate')[0].dispatchEvent(new CustomEvent('input'));

And Vue will recognize it as a regular native input evnet.