Diagram functions undefined

The functions below throw errors when I try to call them. It's likely a typo, the functions call this.$refs.** when they should call this.$refs.diagram.** This caused great confusion since the function names are re-used. https://github.com/max-kut/vue-diagram-editor/blob/d712b70855b7773e7e65646c5c2d85c04b196b10/src/components/Diagram.vue#L147-L179

To reproduce: In line 83 below, I attempt to call the disableDblClickZoom and then get the error and stack trace that follows:

<template>
<div>
  <VueDiagramEditor ref="diagram" :node-color="nodeColor">
    <pre slot="node" slot-scope="{node}">{{ format(node) }}</pre>

  </VueDiagramEditor>
  <button>FUcking shit</button>
</div>
</template>

<script>
import VueDiagramEditor from 'vue-diagram-editor';
import 'vue-diagram-editor/dist/vue-diagram-editor.css';

export default {
  name: 'HelloWorld',
  components: {
    VueDiagramEditor
  },
  data: () => ({
    nodes: {
      'node-1': {
        id: 'node-1',
        title: 'My node 1',
        size: {
          width: 200,
          height: 220
        },
        portsOut: {
          default: 'out port default'
        }
      },
      'node-2': {
        id: 'node-2',
        title: 'My node 2',
        size: {
          width: 200,
          height: 220
        },
        coordinates: {
          x: 280,
          y: 100
        },
        portsIn: {
          default: 'in port'
        }
      },
      'node-3': {
        id: 'node-3',
        title: 'My node 3',
        size: {
          width: 200,
          height: 220
        },
        coordinates: {
          x: 280,
          y: 100
        },
        portsIn: {
          default: 'in port'
        }
      },
    },
    links: {
      'link-1': {
        id: 'link-1',
        start_id: 'node-1',
        start_port: 'default',
        end_id: 'node-2',
        end_port: 'default'
      }
    }
  }),
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$refs.diagram.setModel({
        nodes: this.nodes,
        links: this.links
      });
      this.$refs.diagram.disableDblClickZoom();  // THIS LINE
    },
    format(node) {
      return JSON.stringify(node, null, 2);
    },
    nodeColor(node) {
      if (node.coordinates.x > 200) {
        return '#3d405b';
      }
      if (node.coordinates.y > 200) {
        return '#81b29a';
      }

      return '#e07a5f';
    },
  }
};
</script>

Error:

vue.runtime.esm.js?2b0e:1888 TypeError: this.$refs.disableDblClickZoom is not a function
    at VueComponent.disableDblClickZoom (vue-diagram-editor.cjs.js?04d5:2182)
    at VueComponent.init (HelloWorld.vue?140d:83)
    at VueComponent.mounted (HelloWorld.vue?140d:75)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
    at Vue._update (vue.runtime.esm.js?2b0e:3945)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:4066)

max-kut / vue-diagram-editor

Diagram functions undefined #2