How to link two vue-slick-carousel sliders?

Question

Slick

I wanted to ask for help in setting up communication between two snipers made on vue-slick-carousel.

<div class="preview">
                    <VueSlickCarousel
                        ref="preview"
                        :asNavFor="$refs.miniPreview"
                        :focusOnSelect="true"
                        :fade="true"
                        :arrow="false">
                        <div class="preview-slide" v-for="image in images">
                            <img :src="image" alt="{{project.title}}">
                        </div>
                    </VueSlickCarousel>
                </div>
                <div class="mini-slider">
                    <VueSlickCarousel
                        ref="miniPreview"
                        :slidesToShow="1"
                        :variableWidth="true"
                        :focusOnSelect="true"
                        :arrow="true"
                        :centerMode="true">
                        <div class="mini-preview" v-for="image in images">
                            <img :src="image" alt="{{project.title}}">
                        </div>
                        <template #prevArrow>
                            <div class="btn-prev">
                                <i class="fas fa-chevron-left"></i>
                            </div>
                        </template>
                        <template #nextArrow>
                            <div class="btn-next">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </template>
                    </VueSlickCarousel>
                </div>

Answer 1

:asNavFor="$refs.miniPreview"

Why it doesn't work, as the documentation suggests :

$refsare only populated after the component has been rendered, and are not reactive. This is meant only as a workaround for directly manipulating descendants - you should avoid accessing $refsfrom templates or computed properties.

As a workaround, you can force the component to update after mounting, so that the sliders will get the correct references when re-rendering:

mounted() {
  this.$nextTick(this.$forceUpdate);
},

https://jsfiddle.net/kpvwcsz7/