【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたいです

#vue-slick-carousel にてv-forでループしたリストを表示させたいです

<List v-for="(list, index) in listData" :index="index" :list="list" :key="list.id"/>で
受け取ったリストを追加されるたびにスライダーへ反映させたいのですが、
コンポーネントの<List>を<VueSlickCarousel>タグで囲っているので<List>がひとつとして認識されているためか、
以下のようにsettingにて3枚表示にしているのですが、適用されない状況です。。（矢印もドットも適用されていないです。。）

v-forにて受け取ったリストを追加されるたびにスライダーへ反映させるためにはどのように
記述したらよろしいのでしょうか。。

分かる方いらっしゃいましたらお力添えをいただきたいです。
よろしくお願い致します。

html
1<div class="profile-posts">
2        <VueSlickCarousel v-bind="settings">
3          <List
4            v-for="(list, index) in listData"
5            :index="index"
6            :list="list"
7            :key="list.id"
8          />
9        </VueSlickCarousel>
10      </div>

js
1   listData: [],
2      settings: {
3        dots: true,
4        infinite: false,
5        slidesToShow: 3,
6        slidesToScroll: 3,
7        initialSlide: 0,
8      },
9  methods: {
10 next() {
11        this.$refs.slick.next();
12    },
13    prev() {
14        this.$refs.slick.prev();
15    },
16    reInit() {
17        this.$nextTick(() => {
18            this.$refs.slick.reSlick();
19        });
20    },

css
1.slick-slider{
2  width: 90%;
3}
4

#試したこと

<VueSlickCarousel v-bind="settings">
    <div><h3>1</h3></div>
     <div><h3>2</h3></div>
      <div><h3>3</h3></div>
       <div><h3>4</h3></div>
        <div><h3>5</h3></div>
</VueSlickCarousel>

少し雑ですが、<List>コンポーネント部分を上記のようにわかりやすく数字に置き換えてみたら
スライダーとしても機能しており、矢印も反映され、３枚表示になっております。

vue-slick-carouselとして問題はないように見受けられます。

#追記1

数日回答を得られなかった為、以下サイトに掲載させて頂いております。

【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたい
 【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたい

#追記2

同じような問題を抱える質問がありまして、そちらを確認しましたが、それでも原因が分からない状況です。。

v-forが完了後にslickを実行したい