title: vue-awesome-swiper(swiperjs) on Nuxt js not working in production but works on dev
body: <p>I am using vue-awesome-swiper and have followed the steps here: <a href="https://github.com/surmon-china/vue-awesome-swiper" rel="nofollow noreferrer">https://github.com/surmon-china/vue-awesome-swiper</a>. I have opted to register this plugin globally in Nuxt js. </p>
  
  <p><strong>PROBLEM</strong>: The Dev works perfectly fine, the slides are on each page and the navigation works. The production, on the other hand, has all the slides on page one, the navigation works here leaving the other pages blank as all slides are on the first page. </p>
  
  <p>On dev:
  <a href="https://i.stack.imgur.com/55AN8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/55AN8.png" alt="Dev Server Carousel"></a></p>
  
  <p>On production:
  <a href="https://i.stack.imgur.com/poz3h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/poz3h.png" alt="Production Server Carousel"></a></p>
  
  <p>These are my files:</p>
  
  <p>plugins/VueAwesomeSwiper.js</p>
  
  <pre><code>import Vue from 'vue';
  import VueAwesomeSwiper from 'vue-awesome-swiper';
  
  // import style
  import 'swiper/css/swiper.css';
  
  Vue.use(VueAwesomeSwiper);
  </code></pre>
  
  <p>nuxt.config.js</p>
  
  <pre><code>...
  css: [], &lt;--- Do I need to add something to add here?
  plugins: [
      { src: '~/plugins/VueAwesomeSwiper.js' },
    ]
  ...
  </code></pre>
  
  <p>TheSlider.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;swiper class="swiper" :options="swiperOption"&gt;
          &lt;swiper-slide&gt;Slide 1&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 2&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 3&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 4&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 5&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 6&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 7&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 8&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 9&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 10&lt;/swiper-slide&gt;
          &lt;div slot="button-prev" class="swiper-button-prev"&gt;&lt;/div&gt;
          &lt;div slot="button-next" class="swiper-button-next"&gt;&lt;/div&gt;
        &lt;/swiper&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
  import { Component, Vue } from 'vue-property-decorator';
  
  @Component
  export default class TheSlider extends Vue {
    swiperOption = {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    };
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>I am not sure what I am doing wrong. Could someone help? Thanks!</p>