Проблема с использованием VueJs с библиотекой daterangepicker

Question

Функционально все работает нормально.Единственная проблема, с которой я сталкиваюсь, состоит в том, что vue model staff_date_of_birth не обновляется, когда пользователь изменяет входное значение.Библиотека Daterangepicker, которую я здесь использую http://www.daterangepicker.com/#config

HTML для моего элемента ввода

<input type="text" v-model="staff_date_of_birth" name="staff_date_of_birth" v-bdcalendar class="form-control col-md-7 col-xs-12 bdcalendar">

Добавлена ​​директива VueJs, чтобы она отправляла событие изменения.я использовал подобное решение для select2 selectbox, и он работает.Но, очевидно, здесь это не работает, даже если событие change отправлено

  Vue.directive('bdcalendar', {
        inserted(el) {
            $(el).on('hide.daterangepicker', () => {
                const event = new Event('change', { bubbles: true, cancelable: true });
                el.dispatchEvent(event);

        });
        },
    });