Прослушивание события apply.daterangepicker в компоненте vue

Question

Мне кажется, я понимаю, как прослушивать событие щелчка, но я пытаюсь определить, как прослушивать пользовательское событие для плагина bootstrap-daterangepicker.

В jquery вы обычно слушаете это событие примерно так:

 $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

Таким образом, событие, которое я должен прослушивать в соответствии с документами bootstrap-daterangepicker , равно apply.daterangepicker.

Я подумал, что мне нужно привязать событие к моему элементу, и я бы предположил, что пользовательское событие основано на документах:

<date-range-picker v-on:apply.daterangepicker="doSomething"></date-range-picker>

Итак, в моем компоненте vue у меня есть это:

<template>
    <div class="input-group drp-container">
        <input type="text" class="form-control drp" name="daterangepicker">
    </div>
</template>

<script>
  import moment from 'moment';
  import daterangepicker from 'bootstrap-daterangepicker';

export default {
  name: 'date-range-picker',
  data() {
    return {

    }
  },
  mounted() {
      $('.drp').daterangepicker({
          ranges: {
              'Today': [moment(), moment()],
              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          alwaysShowCalendars: true,
          buttonClasses: "btn",
          applyClass: "btn-brand-green",
          cancelClass: "btn-brand-red",
          showDropdowns: true,
          autoApply: true,
          opens: 'right',
          maxDate: moment()
      });
  },
  methods: {
    doSomething() {
      console.log('do something');
      console.log(picker.startDate);
    }
  }
}

</script>

Я просто пытаюсь разобраться, как все это должно работать, так как я новичок в vue, поэтому я был бы рад просто утешить .log даты, когда выбран диапазон дат, но в конечном счете, более полное решение будет основано на том, что он представляет собой автономный дочерний компонент DateRangePicker, который передает свои события и данные (?) обратно в родительский компонент.

Итак, мой быстрый и грязный вопрос: как я могу просто заставить это работать в console.log выбранных значений?

Конечной целью будет вопрос, как я могу отправить это событие обратно в родительский компонент, чтобы я мог что-то с ним сделать.

UPDATE

Я понял, что поместил привязку события в основную ссылку на компонент, а не в базовый элемент html, поэтому, если я изменю это и просто использую простое событие щелчка, я могу получить метод doSomething() для по крайней мере, огонь, так что это шаг в правильном направлении.

ОБНОВЛЕНИЕ 2

Очевидно, v-on:click работает, но v-on:change или любое другое событие, которое я пробую, не работает, так что теперь я очень запутался в vue.

ОБНОВЛЕНИЕ 3

Найден этот другой ТАК вопрос и я не уверен, является ли это правильным методом или нет. Это работает, но кажется дублирующим. Я регистрирую прослушиватель событий в mounted(), который вызывает updateValue (), но затем он также имеет v-on:input="updateValue($event.target.value)". Это правильно? Как это не просто дублировать прослушиватель событий?

<template>
    <div class="input-group drp-container">
        <input type="text" class="form-control drp" name="daterangepicker" v-bind:value="value" v-on:input="udpateValue($event.target.value)">
    </div>
</template>

<script>
  import moment from 'moment';
  import daterangepicker from 'bootstrap-daterangepicker';

export default {
  name: 'date-range-picker',
  props: {
    value: {
      type: String,
      default: moment().format('MM/DD/YYYY')
    }
  },
  data() {
    return {

    }
  },
  mounted() {
      var self = this;
      $(this.$el).daterangepicker({
          ranges: {
              'Today': [moment(), moment()],
              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          alwaysShowCalendars: true,
          buttonClasses: "btn",
          applyClass: "btn-brand-green",
          cancelClass: "btn-brand-red",
          showDropdowns: true,
          autoApply: true,
          opens: 'right',
          maxDate: moment()
      }).on('apply.daterangepicker', function(e, picker){
        let start = picker.startDate.format('YYYY-MM-DD');
        let end = picker.endDate.format('YYYY-MM-DD');
        let dates = {};
        dates.start = picker.startDate.format('YYYY-MM-DD');
        dates.end = picker.startDate.format('YYYY-MM-DD');  
        self.updateValue(dates);
      });
  },
  methods: {
    updateValue: function(value) {
      console.log(value);
      //this.$emit('input', dates);
    }
  },
  watch: {

  }
}

</script>