A VueJS Signature canvas field, using szimek/signature_pad

Signature.vue

<template>

    <div>
        <canvas class="signature"></canvas>

        <div class="clearfix"></div>

        <div class="btn-group">
            <button @click="clear" type="button" class="btn btn-default">
                <i class="fa fa-times"></i>
                Clear Signature
            </button>
        </div>

    </div>

</template>

<style>
    .signature {
        border: 2px solid #cbc9c6;
        border-radius: 5px;
    }
</style>

<script>
    import SignaturePad from 'signature_pad';

    export default {
        props: {
            value: String,
        },

        data() {
            return {
                pad: null,
            };
        },

        mounted() {
            let canvas = document.querySelector('canvas');

            this.pad = new SignaturePad(canvas, {
                onEnd: () => {
                    this.$emit('input', this.pad.toDataURL());
                }
            });
        },

        methods: {
            clear() {
                this.pad.clear();

                this.$emit('input', this.pad.toDataURL());
            },
        }
    }
</script>