Доступ к экземпляру внешней библиотеки, хранящейся в VueJS

Question

Я недавно играл с VueJS, и я пытаюсь интегрировать его с другой библиотекой JS под названием panzoom .Библиотека работает хорошо, но у меня возникают проблемы с повторным использованием одного ее экземпляра в моем проекте.

Используя простой ванильный файл JS, я могу создать переменную (const) и инициализировать экземпляр внутри него, какthis:

const myInstance = panzoom(document.getElementById('canvas'));

Тогда я мог бы позже получить к нему доступ через myInstance.pause() или myInstance.resume().

Каким будет VueJS способ хранения и извлечения экземпляра внешней библиотеки (т.е.переменная, которая вызвала функцию)?

Вот что я попробовал:

Main.js

import Vue from 'vue'
import App from './App.vue'
import panzoom from "panzoom" // External library

// Make the panzoom library accessible
Vue.prototype.$panzoom = panzoom;

new Vue({
  el: "#app",
  store,
  render: h => h(App)
})

Приложение.vue

<template>
  <div ref="canvas"></div>
</template>

import Artboards from '../Artboards.vue'

export default {
  name: "app",
  components: {
    Artboards
  },
  mounted() {
    // Trigger the Vue instance's $panzoom function
    // Using "const =" will not fix the problem
    this.$panzoom(this.$refs.canvas); // <-- How can I access this later?
  }
};

Artboards.vue

export default {
  name: "Artboards",
  methods: {
    resize() {
      this.$panzoom.pause() 
      // ^ Pause the object that panzoom() was initialized on (in App.vue)
      // This currently throws an error about this.$panzoom.pause() not being a function
    }
  }
}