При использовании временной шкалы, как добавить флажок в каждую ячейку ресурса, которая генерирует пользовательское событие Vue?

Question

Я хочу настроить ячейки ресурса следующим образом:

• Я хочу иметь возможность установить флажок перед именем ресурса
• Я хочу создать пользовательский Vue событие, когда флажок отмечен или снят.

Я попытался связать следующее с реквизитом рендера ресурса:

 resourceRender: (renderInfo: any) => {
    const checkBox = document.createElement('input');
    checkBox.type = 'checkbox';
    checkBox.addEventListener('change', () => {
        if (checkBox.checked) {
            this.$emit('resource-checked', renderInfo.resource);
        } else {
            this.$emit('resource-unchecked', renderInfo.resource);
        }
    });
    renderInfo.el.querySelector('.fc-cell-text').prepend(checkBox);
}

Этот флажок добавлен правильно, но когда я нажимаю на нее, у меня появляется эта ошибка:

vue.runtime.esm.js:3857 Uncaught TypeError: Cannot read property 'resource-checked' of undefined
at SgsResourceTimeline.Vue.$emit (vue.runtime.esm.js:3857)
at SgsResourceTimeline.Vue.<computed> [as $emit] (backend.js:1793)
at HTMLInputElement.<anonymous> (sgs-resource-timeline.ts:73)

Со следующим кодом VueJS, где возникает ошибка:

Vue.prototype.$emit = function (event) {
    var vm = this;
    if (process.env.NODE_ENV !== 'production') {
      var lowerCaseEvent = event.toLowerCase();
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          "Event \"" + lowerCaseEvent + "\" is emitted in component " +
          (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
          "Note that HTML attributes are case-insensitive and you cannot use " +
          "v-on to listen to camelCase events when using in-DOM templates. " +
          "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
        );
      }
    }
    // THIS IS WHERE IT CRASHES
    // event is equal to resource-checked
    // vm._events is undefined
    var cbs = vm._events[event];
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs;
      var args = toArray(arguments, 1);
      var info = "event handler for \"" + event + "\"";
      for (var i = 0, l = cbs.length; i < l; i++) {
        invokeWithErrorHandling(cbs[i], vm, args, vm, info);
      }
    }
    return vm
   };

Что я делаю неправильно, или как мне это сделать?