Vuejs условная отрисовка v-if

Всем привет! Хочу сделать простенький слайдер с выгрузкой фотографий из инсты, на php я такой делал, но мне нужно сделать ajax-ом. В общем так, на vue кое-что не получается, вывожу по условиям v-if (тип видео, то ссылка на видео), v-else-if (тип картинка, ссылка до картинки) и v-else для карусели, с каруселью возникла проблема с отрисовкой, хочу карусель выводить с помощью swiper slider-а, но почему то swiper slider дублируется несколько раз в нескольких местах. Полагаю я неправильно работаю с условиями, но не могу понять, где именно. Должно выглядеть так: Но выглядит так:

  <div class="instagram wrapper" id="app">
        <div class="insta-title">Insta feed</div>
        <div id="gallery" >
            <div class="photos" id="photos">

                <div class="photo" v-for="item in items">
                    <!-- if type video show video and show play button -->
                    <a v-if="item.type == 'video'" :href="item.videos.standard_resolution.url" class="fancybox.iframe" target="_blank" data-fancybox="_photos">
                        <div class="img-bg scroll-trigger" v-bind:style="{ backgroundImage: 'url(' + item.images.standard_resolution.url + ')' }"  style='background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 100%;'></div>
                    </a>
                    <!-- if type image show image -->
                    <a v-else-if="item.type == 'image'" :href="item.images.standard_resolution.url" class="fancybox" target="_blank" data-fancybox="_photos">
                        <div class="img-bg scroll-trigger" v-bind:style="{ backgroundImage: 'url(' + item.images.standard_resolution.url + ')' }"  style='background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 100%;'></div>
                    </a>
                    <!-- if type carousel show slider with carousel_media images -->
                    <div class="b-slider"  v-else>
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="ci in carousel" >
                                    <a  class="fancybox" target="_blank" data-fancybox="_photos" :href="ci.images.standard_resolution.url ">
                                        <div class="img-bg scroll-trigger" v-bind:style="{ backgroundImage: 'url(' + ci.images.standard_resolution.url + ')' }"  style='background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 100%;'></div>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>

                    </div>

                </div>
            </div>

            <div class="buttons">
                <input class="prev" type="button" value="prev">
                <input class="next" type="button" value="next">
            </div>
        </div>


    </div>


    <script>
    var token = '', // learn how to obtain it below
        userid = '', // User ID - get it in source HTML of your Instagram profile or look at the next example :)
        num_photos = 20; // how much photos do you want to get
        var data = [];

        $.ajax({
            url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent', // or /users/self/media/recent for Sandbox
            dataType: 'jsonp',
            type: 'GET',
            data: {access_token: token, count: num_photos},
            success: function(data){
                new Vue({
                  el: '#app',
                  data() {
                    return {
                      items: data.data,
                      carousel: data.data[0].carousel_media
                    };
                  },

                });
            },
            error: function(data){
                console.log(data); // send the error notifications to console
            }
        });


        $(function(){

            $(window).load(function() {
                var photos = $('.photos');
                var photoWidth = $('.photo').outerWidth(true);
                var photoLength = $('.photos .photo').length;
                var wrapperWidth = $('.instagram.wrapper').outerWidth();
                console.log(wrapperWidth)

                var divs = $("#photos .photo");
                for(var i = 0; i < divs.length; i+=3) {
                  divs.slice(i, i+3).wrapAll("<div class='insta-slide'></div>");
                }

                $('.insta-slide').css('width', wrapperWidth/2 + 'px')

                photos.css('width', photoWidth * photoLength +'px' );
            })

        })

    </script>