Slick Slider Not Work When Array Update In Ember js

When first render component slick slider work well but when i update array data by action then break slick slider view.Please Help me.I am using Ember Cli version 3.12.Here Is My Component Code:

slickCarousel(){
$(`.${this.className}`).slick({
  slidesToShow: this.slideShow,
  responsive: [
    { breakpoint: 992, settings: { slidesToShow: 4 } },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        arrows: false,
        dots: true,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        arrows: false,
        dots: true,
      },
    },
  ],
  arrows: true,
  prevArrow:
    "<button type='button' class='slick-prev'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
  nextArrow:
    "<button type='button' class='slick-next'><i class='fa fa-angle-right' aria-hidden='true'></i></button>",
});
},

destroyCarousel() {
if ($(`.${this.className}`).hasClass('slick-initialized')) {
  this.$(`.${this.className}`).slick('destroy');
}       
},

didInsertElement() {
this._super(...arguments);
this.destroyCarousel();
this.slickCarousel();
},