Словить нестандартное событие в Alpine JS

На своей страничке использую библиотеку AlpineJS. Со стандартными элементами использую директиву x-model. Тут вопросов нет, пример из документации:

<div x-data={ message:'' }>
...
<input type="text" x-model="message">
<span x-text="message"></span>
...

Здесь ввод в элементе input связывается со строкой в span через реактивную переменную message.

Но сейчас мне нужно использовать компонент datarangepicker. С ним так не получается. Единственный выход - ловить событие компонента apply.daterangepicker. Вот пример:

$('#daterange').daterangepicker();
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
  console.log(picker.startDate.format('YYYY-MM-DD'));
  console.log(picker.endDate.format('YYYY-MM-DD'));
});

Да, и директива x-on:apply.daterangepicker тут тоже не работает. Пробую по-другому...

Но из замыкания я не вижу возвращаемый объект и его поля:

function app() {
  return {
    Period: "",
  init: function() {
    $("#book-period").daterangepicker({
      timePicker: true,
      startDate: moment().startOf("hour"),
      endDate: moment().startOf("hour").add(32, "hour"),
      locale: {
        format: "M/DD hh:mm A",
      },
    }).on(
      "apply.daterangepicker",
      function (ev, picker) {
        console.log("Event!");
        // как здесь достучаться до строки Period и присвоить ей значение?
      }
    );
  }

Подскажите, пожалуйста, как такую задачу решить правильно?!