How to get the swiper of tabs

Questions
1 
<f7-tabs animated swipeable id="swipeable-tabs">
  <f7-tab class="page-content" id="tab-recommend" tab-active>recommend</f7-tab>
  <f7-tab class="page-content" id="tab-follow">follow</f7-tab>
  <f7-tab class="page-content" id="tab-channel">channel</f7-tab>
</f7-tabs>

…
onF7Ready() {
console.log(this.$$(’#swipeable-tabs’)[0]); // the print object includes swiper
console.log(this.$$(’#swipeable-tabs’)[0].swiper); // print undefined
console.log(this.$f7.swiper.get(’#swipeable-tabs’)); // print undefined
}

I guess the init of the tabs’ swiper is after the triggering of onF7Ready. So, how to get the swiper of tabs correctly?

2

Yes, if you have it inside of the page, then better stick to page:init Page’s event instead:

<f7-page @page:init="onPageInit">
...
</f7-page>

export default {
  ...
  methods: {
    onPageInit() {
      console.log(this.$$(’#swipeable-tabs’)[0].swiper);
    },
  }
}
3

It dosen’t work. You can check the test sample below. I wrote a sweapeale tabs and a sweaper, log them in the page:init event, only the second sweaper can be found.
https://jsfiddle.net/wxfred/89052b4g/

4

Looks like an issue, will fix it. As for now, you can use $nextTick as a workaround https://jsfiddle.net/724buc9f/