Owl-Carousel Vs Vuejs

Question

I’m working with Vuejs a little while and recently I took a template to embed in my application and it has a slide which uses the Owl-Carousel plugin, so I can not use this plugin.

What is the situation: In the first instance when I open the page for the first time everything is loaded correctly, so when you click on another tab and then go back to the tab home ai no longer works, it is as if Vue Router could not load the functionality of this dependency! Dai when I withdraw the class Owl-carousel of Divback to work normally with the disfigured slide... it is as if Vuejs had not accepted this plugin!

Remembering that these dependencies are static inside the public folder

My Component where the slide is:

    <template>
  <div class="hello">
      <section class="hero-area">
   <div class="hero-slides owl-carousel">

            <!-- Single Hero Slide -->
            <div class="single-hero-slide d-flex align-items-center justify-content-center">
                <!-- Slide Img -->
                <div class="slide-img bg-img" style="background-image: url(img/bg-img/bg-1.png);"></div>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-9">
                            <!-- Slide Content -->
                            <div class="hero-slides-content" data-animation="fadeInUp" data-delay="100ms">
                                <div class="line" data-animation="fadeInUp" data-delay="300ms"></div>
                                <h2 data-animation="fadeInUp" data-delay="500ms">Pousada Vila de Atalaia</h2>
                                <p data-animation="fadeInUp" data-delay="700ms">Lorem ipsum dolor sit amet, consectetur
                                    adipiscing elit. Donec malesuada lorem maximus mauris sceleri sque, at rutrum nulla
                                    dictum. Ut ac ligula sapien. Suspendisse cursus faucibus finibus.</p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Single Hero Slide -->
            <div class="single-hero-slide d-flex align-items-center justify-content-center">
                <!-- Slide Img -->
                <div class="slide-img bg-img" style="background-image: url(img/bg-img/bg-2.png);"></div>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-9">
                            <!-- Slide Content -->
                            <div class="hero-slides-content" data-animation="fadeInUp" data-delay="100ms">
                                <div class="line" data-animation="fadeInUp" data-delay="300ms"></div>
                                <h2 data-animation="fadeInUp" data-delay="500ms">Canavieiras - Bahia</h2>
                                <p data-animation="fadeInUp" data-delay="700ms">Lorem ipsum dolor sit amet, consectetur
                                    adipiscing elit. Donec malesuada lorem maximus mauris sceleri sque, at rutrum nulla
                                    dictum. Ut ac ligula sapien. Suspendisse cursus faucibus finibus.</p>
                                <a href="#" class="btn palatin-btn mt-50" data-animation="fadeInUp"
                                    data-delay="900ms">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Single Hero Slide -->
            <div class="single-hero-slide d-flex align-items-center justify-content-center">
                <!-- Slide Img -->
                <div class="slide-img bg-img" style="background-image: url(img/bg-img/bg-3.png);"></div>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-9">
                            <!-- Slide Content -->
                            <div class="hero-slides-content" data-animation="fadeInUp" data-delay="100ms">
                                <div class="line" data-animation="fadeInUp" data-delay="300ms"></div>
                                <h2 data-animation="fadeInUp" data-delay="500ms">Enjoy your life</h2>
                                <p data-animation="fadeInUp" data-delay="700ms">Lorem ipsum dolor sit amet, consectetur
                                    adipiscing elit. Donec malesuada lorem maximus mauris sceleri sque, at rutrum nulla
                                    dictum. Ut ac ligula sapien. Suspendisse cursus faucibus finibus.</p>
                                <a href="#" class="btn palatin-btn mt-50" data-animation="fadeInUp"
                                    data-delay="900ms">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

  </section>
  </div>
</template>

<script>

export default {

  name: 'HelloWorld',
  data(){
    return{
      publicPath: process.env.BASE_URL
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Would anyone have any idea what’s going on and could give me some ideas on how to solve this?