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;" >
</v-zoomer>
<div class="fixed hidden lg:flex flex-row bottom-16 space-x-2 place-items-center">
<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>
<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.