Click events not firing

[masatoTokyo]

I tried to use @beforeChange event but the event is not fired at all. Am I doing something wrong?

My code is here.

    new Vue({
      el: '#carousel',
      components: { Slick },
      data() {
        return {
          slickOptions: {
            slidesToShow: 1,
          }
        };
      },
      methods: {
        next() {
          this.$refs.slick.next();
        },

        prev() {
          this.$refs.slick.prev();
        },

        reInit() {
          this.$nextTick(() => {
            this.$refs.slick.reSlick();
          });
        },

        handleBeforeChange(event, slick, currentSlide, nextSlide) {
          console.log(
            'handleBeforeChange',
            event,
            slick,
            currentSlide,
            nextSlide
          );
        }
      }

<div id="carousel">
    <slick ref="slick" :options="slickOptions" @before-change="handleBeforeChange">
      <div class="slide"></div>
      <div class="slide"></div>
    </slick>
</div>

[arifhussain353]

@masatoTokyo @beforeChange instead of @before-change