Multiple instances of swiper using Nuxt / Vue

BUG REPORT TEMPLATE

Vue version: “2.5.4” via Nuxt “^1.0.0-rc11” and “vue-awesome-swiper”: “^3.1.3”

Reproduction Link

//INDEX: Where I call a Swiper component

<template>
  <div class="home">
    <section>
      <h2 class="pageTitle container">Novedades</h2>
      <no-ssr><b-tabs class="homeTabNav" pills>
        <b-tab title="Por primera vez" active>
          <div class="homeSlider">
            <Carousel v-bind:json="$store.state.jsonA[0]"/>
          </div>
        </b-tab>
        <b-tab title="Están de vuelta">
          <div class="homeSlider">
            <Carousel v-bind:json="$store.state.jsonB[0]"/>
          </div>
        </b-tab>
      </b-tabs></no-ssr>
    </section>
  </div>
</template>

<script>
import Carousel from "~/components/Carousel.vue";
export default {
  components: {
    Carousel
  }
};
</script>


// Component: Where is located the swiper component with the binded data

<template>
  <div class="swiper-container">
    <div v-swiper:mySwipper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" xxxxxxxxxxx >

          <router-link xxxxxxxxxxx>
          <div class="xxxxxxxxxxx">
            <h2 class="xxxxxxxxxxx" v-show="xxxxxxxxxxx">{{xxxxxxxxxxx}}</h2>
            <div class="xxxxxxxxxxx">{{xxxxxxxxxxx}}</div>
          </div>

        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import 'swiper/dist/css/swiper.css'
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}
export default {
  props: ["xxxxxxxxxxxxxxxxxxxxxx"],
  data(){
    return{
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 0,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      }
    }
  },
  asyncData(context) {
    // called every time before loading the component
    return {
      xxxxxx: "/xxxxxxxxxxxx/" + xxxxxxxxxxxx
    };
  }
};
</script>

Steps to reproduce

I need to call my swiper component in different instances, but only one swiper is loaded, the others just not works, the swipers are located in different tabs.

What is Expected?

Every instance of the component swiper has to be loaded and working by itself

What is actually happening?

Only one swiper works, the other just not.

Some screenshots:

##Working:

##Not Working:

[dllsystem]

v-swiper:mySwipper1=“swiperOption”

v-swiper:mySwipper2=“swiperOption”

[CHEWX]

You need a unique instance name.

<div class="slideshow" v-swiper="swiperOption" :instanceName="unique.id.here">