Implement Jsignature within vuejs component

Question

I'm new to Vue and trying to implement Jsignature within a 'custom' Vuejs component.

My solution is based on: https://v2.vuejs.org/v2/examples/select2.html

It should be straight forward however I don't get it working, the solution I got so far results in the following error:

'Jsignature' is defined but never used
import Jsignature from '../../lib/jsignature

The component containing the signature.

<template>
  <div>
    <app-signature></app-signature>
  </div>
</template>
<script>
  import Signature from './signature/Signature.vue'

  export default {
   components: {
     appSignature: Signature
    }
  }
</script>

The signature component.

<template>
  <div id="signaturecanvas"></div>
</template>
<script>
  import Jsignature from '../../lib/jsignature'

  export default {
    data () {
      return {
        signature: ''
      }
    },
    methods: {
      initial () {
        var element = ('#signaturecanvas')
        element.Jsignature.jSignature()
      }
    },
    created () {
      this.initial()
    }
  }
</script>
<style></style>

Answer 1

Instead of importing JQuery and JSignature, I made the choice to use signature pad. https://github.com/szimek/signature_pad

This 'plug-in' is in native javascript/html5 which makes my application less constraint to external libraries like JQuery.