Error on zoomIn() and zoomOut()

[adiandroo]

I use the v-zoomer for zoom in and zoom out image. The code is like this:

` <v-zoomer ref="zoomer" class="zoomer-container" :zoomed.sync="zoomed"

<img :src="${previewProduct}" :alt="title" style="width: 100%; height: 100%; object-fit: cover;"

<button class="rounded-full h-10 w-10 flex items-center justify-center bg-grey-60 text-white text-2xl" @click="$refs.zoomer?.zoomIn()"> + <button class="rounded-full h-10 w-10 flex items-center justify-center bg-grey-60 text-white text-2xl" @click="($refs.zoomer?.zoomOut())">`

</button> </div>

But it got error on $refs.zoomer?.zoomIn() & $refs.zoomer?.zoomOut(). When I click button that run zooomIn and zoomOut. It gives error on linter 'Property 'zoomIn' does not exist on type 'Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>> | Element | (Vue<...> | Element)[]'. Property 'zoomIn' does not exist on type 'Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>'.ts(2339)' and when I use to click on development, it gives error instrument.js?ea14:109 [Vue warn]: Error in v-on handler: "TypeError: _vm$$refs$zoomer.zoomIn is not a function". I'm using Vue.js with TypeScript

[shayanbahrampour]

try $refs.zoomer[0].zoomIn() instead.