iPaper integration issue

[CesarGomezTissini]

Excellent component, it has helped me a lot, but I have a problem, more a lacking of technical knowledgment.

I'm embedding a Flipbook's iPaper iframe where I wanna display a PDF. iPaper documentation explains that there is an onSpreadChange event that allows me to know changes for each button pressed (each actions, in fact), and there is no problem. Issue i'm talking about is iPaper has an API that allows me to programmatically communicate with the iframe. This is not working with the component itself. I have already tried all the possible options, but I could not find the correct solution (postMessage API included).

An example is changing the PDF pages by calling iPaperAPI.goToNextPage(). If I use the normal iframe tag it works perfectly, but with the component it doesn't. Can you give me an idea of ​​how I can make iPaperAPI listenable by component?

I have read this issue too but no clue with this.

<vue-friendly-iframe ref="frame"
   src="https://demo.ipaper.io/"
   @load="onLoad"
   @iframe-load="onIframeLoad"
   @onSpreadChange="apiReady"
   frameborder="0"
   gesture="media"
   allowfullscreen
></vue-friendly-iframe>

<v-btn @click="start">Next Page</v-btn>

<script>
export default {
  name: 'HelloWorld',

  data: () => ({
    iframeLoading: true
  }),
  methods: {
    apiReady: function($event) {
      console.log($event)
    },
    start: function() {
      console.log(this)
      iPaperAPI.goToNextPage() //<-- Doesn't works with component
    },
    onLoad: function() {
      console.log('iframe loaded')
      console.log(this.$refs.frame)
      this.iframeLoading = false
    },
    onIframeLoad: function() {
      console.log('iframe loaded')
    }
  }
}
</script>

Thanks in advance!