Viewed() callback in vue 3

[ferropasha]

I am trying use v-viewer component in my vue3 project. What I need is setting up a viewed() callback to change initial zoom level depending on image size. Viewerjs documentation clearly states it should be done in options. Here in this old closed issue
https://github.com/mirari/v-viewer/issues/76 you say exactly the same: "Notice that callback functions can only be configured in options now, do not use like this @viewed="onViewed".

But for some reason in my vue3 component file it works exactly the other way around. This variant fails to compile with undefined error

options: {
...
viewed(){
this.$viewer.zoomTo(window.innerWidth/ this.$viewer.image.naturalWidth);
this.$viewer.moveTo(0,0);
}
...
}

While syntax like @viewed="onViewed" actually works fine. What am I doing wrong here?

[mirari]

These events are actually triggered from the DOM element, luckily v-viewer doesn't need to adapt it specifically, and syntax like @viewed="onViewed" happens to be working at the moment, like @click.native.

As for the undefined error in callback writing, it's probably a matter of this pointing, which may be not really needed in vue3 composition API, or you can use the arrow function instead:

options: {
...
viewed: () => {
  this.$viewer.zoomTo(window.innerWidth/ this.$viewer.image.naturalWidth);
  this.$viewer.moveTo(0,0);
  }
...
}

[ferropasha]

Thanks for reply. I tried your suggestion to use an arrow function. Component compiles fine but with a strange side effect. Images are now loading demonstrably slower than if I stick to @viewed="onViewed" style of syntax as if it now takes more time to perform the same calculations. Any idea what could be going on here?

[mirari]

There should be no significant difference between the two styles. But you can continue to use @viewed, which is probably more concise.