SlickでcenterMode : trueの時slidesToScrollがうまく効かない

前提・実現したいこと

slick.jsでセンターモードを使用しスクロール量（slidesToScroll）を
PC時とSP時など画面幅で変更したいのですが、センターモードをtrueにすると
動かなくなってしまいます。調べてみたら元々のslick.jsでの不具合みたいなんですが
slickSetOptionを使用することで対処できるようなのでやってみたのですが画面幅の切替時に
動作がうまくいきません。事象としては以下のような感じです。

PC→SP幅を縮めた時　動作◎　slidesToScroll:3からslidesToScroll:1へ切替成功
SP→PCへ幅を広げた時　動作☓　slidesToScroll:1のまま

PC→SP、SP→PCどちらへ幅を変更しても切り替えられるようにしたいです。

該当のソースコード

html
1<div id="js-slick">
2    <div>
3        <a href="#dummy">
4            <div class="img-box"><img src="images.jpg" alt=""></div>
5            <p>dummy text dummy text dummy text dummy text</p>
6        </a>
7    </div>
8    <div>
9        <a href="#dummy">
10            <div class="img-box"><img src="images.jpg" alt=""></div>
11            <p>dummy text dummy text dummy text dummy text</p>
12        </a>
13    </div>
14    <div>
15        <a href="#dummy">
16            <div class="img-box"><img src="images.jpg" alt=""></div>
17            <p>dummy text dummy text dummy text dummy text</p>
18        </a>
19    </div>
20    <div>
21        <a href="#dummy">
22            <div class="img-box"><img src="images.jpg" alt=""></div>
23            <p>dummy text dummy text dummy text dummy text</p>
24        </a>
25    </div>
26    <div>
27        <a href="#dummy">
28            <div class="img-box"><img src="images.jpg" alt=""></div>
29            <p>dummy text dummy text dummy text dummy text</p>
30        </a>
31    </div>
32</div>

css
1.slick-slide {
2    background: #fff;
3    max-width: 342px;
4    min-height: 435px;
5    margin: 0 12px;
6}
7
8.slick-slide a {
9    display: block;
10}
11
12.slick-dots li {
13    position: relative;
14    display: inline-block;
15    width: 10px;
16    height: 10px;
17    list-style: none;
18    border-radius: 5px;
19    margin: 0 5px;
20    border: 2px solid #fff;
21}
22
23.slick-dots li.slick-active {
24    background: #fff;
25    border-color: #fff;
26}
27
28.slick-dots {
29    position: absolute;
30    bottom: -90px;
31}
32
33.img-box {
34    width: 342px;
35    height: 256px;
36    overflow: hidden;
37    display: flex;
38    justify-content: center;
39    align-items: center;
40}
41
42.img-box img {
43    width: 100%;
44}
45
46
47@media (max-width: 768px) {
48    .slick-slide {
49        max-width: 275px;
50        min-height: 350px;
51        margin: 0 12px;
52        background: #fff;
53    }
54
55    .img-box {
56        width: 275px;
57        height: 205px;
58    }
59
60    .slick-dots {
61        position: absolute;
62        bottom: -50px;
63    }
64
65    .slick-dots li {
66        background-color: #000000;
67        opacity: 1;
68    }
69}

js
1$(document).ready(function () {
2    const target = $('#js-slick')
3    target.slick({
4        slidesToShow: 3,
5        slidesToScroll: 3,
6        arrows: false,
7        dots: true,
8        centerMode: true,
9        variableWidth: true,
10        responsive: [{
11            breakpoint: 768,
12            settings: {
13                slidesToScroll: 1,
14            }
15        }]
16    });
17    target.slick("slickSetOption", "slidesToScroll", 3, "dots", true);
18});