How to use the jsplumb.jsPlumb function in jsplumb

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import axios from 'axios'
// import { jsPlumb } from 'jsplumb'
import jsp from 'jsplumb'
import App from './App'

import 'reset.css'
import 'element-ui/lib/theme-default/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.prototype.$http = axios
Vue.prototype.$jsplumb = jsp.jsPlumb
Vue.prototype.$util = jsp.jsPlumbUtil

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '',
  components: { App }
})

*/

import _ from 'lodash';
import $ from 'jquery';
import jsPlumbLib from 'jsplumb';
import dagre from 'dagre';
import alerts from 'alerts';
import './type-mapper.css';
/**
 * Renderer constructor for TypeMapper
 * @param {function} onConnectionCallback call back function when connection made
 * @param {function} onDisconnectCallback call back function when connection removed
 * @param {object} typeConverterView Type Mapper View reference object
 * @constructor
 */
var jsPlumb = jsPlumbLib.jsPlumb;

class TypeMapperRenderer {
    constructor(onConnectionCallback, onDisconnectCallback, typeConverterView) {
        this.references = [];
        this.viewId = typeConverterView._model.id;
        this.contextMenu = "typeMapperContextMenu";
        this.jsTreePrefix = "jstree-container";
        this.viewIdSeperator = "___";
        this.sourceTargetSeperator = "_--_";
        this.idNameSeperator = "_-_-_-";
        this.nameTypeSeperator = "---";
        this.placeHolderName = "data-mapper-container" + this.viewIdSeperator + this.viewId;
        this.onConnection = onConnectionCallback;
        this.typeConverterView = typeConverterView;
        this.midpoint = 0.1;
        this.midpointVariance = 0.02;

* specific language governing permissions and limitations
 * under the License.
 */

import _ from 'lodash';
import $ from 'jquery';
import jsPlumbLib from 'jsplumb';
import './transformer-statement.css';
/**
 * Renderer constructor for TransformerRender
 * @param {function} onConnectionCallback call back function when connection made
 * @param {function} onDisconnectCallback call back function when connection removed
 * @param {object} typeConverterView Type Mapper View reference object
 * @constructor
 */
const jsPlumb = jsPlumbLib.jsPlumb;

class TransformerRender {
    constructor(onConnectionCallback, onDisconnectCallback, container) {
        this.container = container;
        this.placeHolderName = 'transformOverlay-content';
        this.viewId = container.attr('id').replace(this.placeHolderName + '-', '');
        this.contextMenu = 'transformContextMenu';
        this.viewIdSeperator = ':';
        this.idNameSeperator = '.';
        this.onConnection = onConnectionCallback;
        this.midpoint = 0.01;
        this.midpointIntermediate = 0.33;
        this.midpointVariance = 0.01;
        this.midpointIntermediateVariance = 0.02;
        this.disconnectCallback = onDisconnectCallback;
        this.connectCallback = onConnectionCallback;

* specific language governing permissions and limitations
 * under the License.
 */

import _ from 'lodash';
import $ from 'jquery';
import jsPlumbLib from 'jsplumb';
import './transformer-statement.css';
/**
 * Renderer constructor for TransformerRender
 * @param {function} onConnectionCallback call back function when connection made
 * @param {function} onDisconnectCallback call back function when connection removed
 * @param {object} typeConverterView Type Mapper View reference object
 * @constructor
 */
const jsPlumb = jsPlumbLib.jsPlumb;

class TransformerRender {
    constructor(onConnectionCallback, onDisconnectCallback, container) {
        this.container = container;
        this.placeHolderName = 'transformOverlay-content';
        this.viewId = container.attr('id').replace(this.placeHolderName + '-', '');
        this.contextMenu = 'transformContextMenu';
        this.viewIdSeperator = ':';
        this.idNameSeperator = '.';
        this.onConnection = onConnectionCallback;
        this.midpoint = 0.01;
        this.midpointIntermediate = 0.33;
        this.midpointVariance = 0.01;
        this.midpointIntermediateVariance = 0.02;
        this.disconnectCallback = onDisconnectCallback;
        this.connectCallback = onConnectionCallback;

* specific language governing permissions and limitations
 * under the License.
 */

import _ from 'lodash';
import $ from 'jquery';
import jsPlumbLib from 'jsplumb';
import './transformer-statement.css';
/**
 * Renderer constructor for TransformerRender
 * @param {function} onConnectionCallback call back function when connection made
 * @param {function} onDisconnectCallback call back function when connection removed
 * @param {object} typeConverterView Type Mapper View reference object
 * @constructor
 */
const jsPlumb = jsPlumbLib.jsPlumb;

class TransformerRender {
    constructor(onConnectionCallback, onDisconnectCallback, container) {
        this.container = container;
        this.placeHolderName = 'transformOverlay-content';
        this.viewId = container.attr('id').replace(this.placeHolderName + '-', '');
        this.contextMenu = 'transformContextMenu';
        this.viewIdSeperator = ':';
        this.idNameSeperator = '.';
        this.onConnection = onConnectionCallback;
        this.midpoint = 0.01;
        this.midpointIntermediate = 0.33;
        this.midpointVariance = 0.01;
        this.midpointIntermediateVariance = 0.02;
        this.disconnectCallback = onDisconnectCallback;
        this.connectCallback = onConnectionCallback;