vue-slick-carousel実装：dev環境では挙動問題ないのにbuild後で表示が崩れる

Question

前提・実現したいこと

Nuxt.jsで
vue-slick-carousel　のプラグインを使ってカルーセル実装を開発環境でできたのですが、
yarn build でbuildすると表示が崩れてしまいます。これを解決したいです。
他にvue-awesome-swiper　でも作ってみましたが、設定をしても
next.prevのボタンが効かなかったりドットが出なかったりしてうまくいかなく、
どうにかvue-slick-carouselでの実装で挙動して欲しいです。
よろしくお願いします。

nuxt.config.js

  plugins: [
    { src: '@/plugins/slick.js', ssr: false },
  ],
  build: {// プラグインがES6などで書かれている場合はビルドの指定も必要になる
    // transpile:['vue-slick-carousel']
    vendor: [
      // 'vue-awesome-swiper',
      'vue-slick-carousel'
    ],
    plugins: [
      new webpack.ProvidePlugin({
        // グローバルなモジュール
        $: 'jquery',
        _: 'lodash'
      })
    ]
  },

~/plugin/slick.js

import Vue from 'vue'
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

Vue.use(VueSlickCarousel)

comp-slick.vue

<template>
  <no-ssr>
    <VueSlickCarousel v-bind="settings">
      <div>
        <div class="case-list">
         スライド1の内容（割と長いhtml）
        </div>
      </div>
      <div>
        <div class="case-list">
         スライド2の内容
        </div>
      </div>
　　　　　　以下省略
      </div>
      <template #prevArrow="arrowOption">
        <div class="custom-arrow">
          {{ arrowOption.currentSlide }}/{{ arrowOption.slideCount }}
        </div>
      </template>
      <template #nextArrow="arrowOption">
        <div class="custom-arrow">
          {{ arrowOption.currentSlide }}/{{ arrowOption.slideCount }}
        </div>
      </template>
      <template #customPaging="page">
        <div class="custom-dot-case">
          {{ page }}
        </div>
      </template>
    </VueSlickCarousel>
  </no-ssr>
</template>

<script>
  import VueSlickCarousel from 'vue-slick-carousel'
  export default {
    components: {
      VueSlickCarousel
    },
    data() {
      return {
        settings: {
          arrows: true,
          dots: true,
          // focusOnSelect: true,
          // infinite: true,
          speed: 500,
          slidesToShow: 4,
          slidesToScroll: 4,
          // adaptiveHeight: true,
          "responsive": [
              {
                "breakpoint": 768,
                "settings": {
                  "slidesToShow": 2,
                  "slidesToScroll": 2,
                }
              },
          ]
        },
      }
    },
  }
</script>

発生している問題・エラーメッセージ

開発環境・build後の環境でエラーは出ません

該当のソースコード

試したこと

vue-slickをNuxt.jsで使用した時の「window is not defined」エラー解消法
https://ti-tomo-knowledge.hatenablog.com/entry/2020/06/23/005607

補足情報（FW/ツールのバージョンなど）

"nuxt": "^2.0.0",

"vue-slick-carousel": "^1.0.6"

ここにより詳細な情報を記載してください。