TypeError: Cannot read properties of undefined (reading 'on') when using panZoom in Vue 3

Question

VUE 3 JS: Implementing the code for panZoom, I'm hitting the TypeError: Cannot read properties of undefined (reading 'on') . I got only solution https://github.com/thecodealer/vue-panzoom/issues/43 which is not applicable in my case.

Please let me know if I'm missing something.

Codesandbox : https://codesandbox.io/s/musing-cloud-rl9sd8?file=/src/components/HelloWorld.vue

My code as following steps:

npm:

npm install vue-panzoom --save

Main.js

import { createApp } from "vue";
import App from "./App.vue";
import panZoom from 'vue-panzoom'

const app = createApp(App);
app.use(panZoom);
app.mount("#app");

AppZoom.vue page

<panZoom selector=".zoomable">
       <div class="zoomable">
             <img src="../../../assets/images/abcdemo.jpg" /> 
       </div>
</panZoom>

When running the code the error as follows:

The details on click of the error as follows:

Answer 1

  if (treeCanvas.value) {
    const instance = Panzoom(treeCanvas.value, {
      maxZoom: 3,
      minZoom: 0.5,
      smoothScroll: true,
      bounds: true,
      boundsPadding: 0.75,
      zoomSpeed: 0.065,
      initialZoom: 1,
    });

    instance.on("panstart", () => {
      isGrabbing.value = true;
    });

    instance.on("panend", () => {
      isGrabbing.value = false;
    });
  }
});

Use the native library with onMounted like this