VUE导致swiper 界面混乱

今天采用vue+swiper开发，如果是静态图片，不通过请求服务器的方式是正常显示的，且可以左右滑动swiper。
如果是静态页面这样可以解决问题

vm = new Vue({
        el: "#container",
        mounted() {
            var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 3,
                    slidesPerColumn: 2,
                    spaceBetween: 5,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                });
        },
        methods: {
            
        },
        data: {
           
        }
    });

如果是动态网页，需要请求服务，需要这样解决

    function readData(){
      //这是一个请求网络服务器的方法
    getRequestPromise(requestUrl).then(function (dataValue) {
        return dataValue;
    }).then(function (dataValue) {
            //显示swiper
            setTimeout(function () {
                var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 3,
                    slidesPerColumn: 2,
                    spaceBetween: 5,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                });
                document.findId('#usnatu_flex_row_style').style.visibility = "visible";//显示
            },200);
        }
    }).catch(function (error) {
        console.log(error.message);
    });
}