بهم ریختن استایل صفحات بعد از ادد کردن فایل جی اس

سلام ، ببینید فقط اینکه بگید من اینو تو اون ادد کردم مشکل دارم که کسی نمیتونه کمکتون کنه.
یا باید کدتون رو بفرستید بقیه ببیننن و نظرشونو بدن تا مشکلتون پیدا بشه.
یا کل پروژه رو به یکی نشون بدید تا حل کنه براتون

هیچ خطایی موقع کامپایل و یا اجرا توی کنسول ندارم و فایل app.js رو فقط پایین صفحه میتونم ادد کنم و فقط اونجاست ک کار میکنه ینی بالای صفحه و زیر فایلهای بوت استرپ و استایلها که ادد میکنم کار نمیکنه و owl.carosel هم ارور میگیره توی console

@Alimotreb @hesammousavi @ali.bayat
موقع استفاده از ویو جی اس کتابخونه owl.carosel ارور میگیره،دقیقا مشکل همینه که استایلامو به هم میریزه و ارورش هم اینه
TypeError: $(...).owlCarousel is not a function

گویا در تعریف توابع owlCarousel مشکلی هست

@ali.bayat
مشکل اینجاست که owlCarosel بدون ویو جواب میده اما ویو که میاد به هم میریزه

@mr.zarrin1994
شما یک کدنویس هستید پس خیلی واضع هست وقتی قبل ارسال پاسخ میزنیم

لطفا قبل از ارسال پاسخ، بر روی دکمه پیش‌نمایش کلیک کنید. تا از درست بودن نکته ارسال کد و ارور‌ مطمئن شوید.

پس از شما انتظار داریم این نکته رو رعایت کنید.
کدی که در پاسخ قبلی بود رو حذف کردم لطفا با رعایت نکته بالا دوباره کدتون رو ارسال کنید اگر بازم نمیدونید چطور، میتونید شماره 9 صفحه زیر رو مطالعه کنید توضیح داده شده
https://roocket.ir/faq

با توجه به ارور owlCarousel ، کاملا مشخصه که نمیتونه کتابخونه owlCarousel رو پیدا و اجرا بکنه.
owlCarousel یک کتابخونه‌ای هست که برای اجرا شدن به jquery نیاز داره !

اگر نمیتونید owlCarousel رو بخوبی با Vue ادغام کنید، وکیج هایی هستند که برای Vue میتونید اسلایدر بسازید و قابقل کاستومایز هم هستند
مثلا: https://www.npmjs.com/package/vue-slider-component

@hesammousavi @ali.bayat

    <div class="like">
            <p v-if="!flag" class="like-number-p" data-id="like-post-1">{{this.likeCount}}</p>
        <a v-if="!flag" @click="like">
            <span v-if="!flag">+</span><i v-if="!flag" class="fa fa-thumbs-up"></i>
        </a>
            <span v-if="errorShow" id="error">{{this.error}}</span>
        <p v-if="flag" class="like-number-p" data-id="like-post-1">{{this.likeCount}}</p>
        <a v-if="flag" @click="dislike">
            <span v-if="flag">+</span> <i class="fa fa-thumbs-down" v-if="flag" id="dislike"></i>
        </a>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        data(){
            return{
                flag:false,
                likeCount:0,
                var:0,
                error:'',
                errorShow:false,
            }
        },
        mounted(){
          axios.get('/*****/public/*****/api/get-likeCount/*****/'+this.*****.id).then(res=>{
              this.var=res.data.var;
              if (this.var === 1){
                  this.flag=true;
              }
              this.likeCount=res.data.likeCount;
          })
        },
        methods:{
            like() {
                axios.get('/*****/public/*****/api/like-*****/' + this.*****.id).then(res => {
                    if (res.data.likeCount) {
                        this.flag = true;
                        this.likeCount = res.data.likeCount;
                        console.log(this.likeCount);
                    }
                    else {
                        this.errorShow=true;
                        this.error=res.data.error;
                        setTimeout(() => this.errorShow=false,3000);
                    }
                })
            },
            dislike() {
                axios.get('/*****/public/*****/api/dislike-*****/' + this.*****.id).then(res => {
                    this.flag = false;
                    this.likeCount = res.data.likeCount;
                })
            }
        },
        props:['*****'],
    }
</script>

<style scoped>
#dislike{
    color: red;
}
    #error{
        color: red;
    }
</style>