Trying to wrap vue-svg-gauge with my own .vue component - not compiling

[TotallyInformation]

This may just be my inexperience with compiling Vue components.

I am trying to create a library of components that are simpler to use for non-web-developers. This is using Node-RED and uibuilder for the framework and comms. The idea being that a user can write a flow in Node-RED that sends data and configuration to a selection of VueJS components to easily create UI's.

I can get vue-svg-gauge to load just fine if I use either web components style loading or when dynamically loading with http-vue-loader but I cannot, so far, get my component to compile if it wraps yours.

I've tried with both Parcel and

Here is my .vue file:

<template>
    <figure :title="config.toolTip" @click="clickOuter">
        <figcaption v-if="config.header" class="uibg-t">
            <span v-html="config.header" />
        </figcaption>
        <vue-svg-gauge
            :style="config.style"
            :start-angle="config.startAngle"
            :end-angle="config.endAngle"
            :value="value || config.value || 0"
            :separator-step="config.separatorStep"
            :min="config.min"
            :max="config.max"
            :gauge-color="config.gaugeColor"
            :scale-interval="config.scaleInterval"
        >
            <slot />
        </vue-svg-gauge>
        <figcaption v-if="config.caption" class="uibg-b">
            <span v-html="config.caption" />
        </figcaption>
    </figure>
</template>

<style scoped>
    figcaption {
        text-align: center;
    }
    .uibg-t {
        margin-bottom: 1rem;
    }
    .uibg-b {
        margin-top: 1rem;
    }
</style>

<script>

import VueSvgGauge from 'vue-svg-gauge'

export default {
    name: 'gauge',

    components: {
        VueSvgGauge
    }, // --- End of components --- //

    /** Note that props with dashes in name have to be referenced as camel case in JS */
    props: {
        'value': Number,
        'config': {
            type: Object,
            default: function() { return {
                'header': undefined,
                'toolTip': undefined,
                'caption': undefined,
                'clickEvents': false,
                'style': 'height:15rem;', // fix the default height to something reasonable
                'value': 0,
            } },
        },
    }, // -- End of props -- //

    methods: {
        /** Handle click events
         * @param {Object} e DOM/Vue event data
         */
        clickOuter: function(e){
            // Only respond to clicks if needed
            if ( this.config.clickEvents !== true ) return
            
            /** If this component is being used with Node-RED/uibuilder, Send a msg back to Node-RED. */
            if ( window.uibuilder ) uibuilder.send({
                'topic': 'gauge clicked',
                // For some reason, just passing e only gives e.isTrusted and nothing else
                'payload': {
                    componentRef: this.$vnode.data.ref,
                    componentTag: this.$vnode.componentOptions.tag,
                    eventType: e.type,

                    x: e.x, y: e.y,
                    clientX: e.clientX, clientY: e.clientY, pageX: e.pageX, pageY: e.pageY,  offsetX: e.offsetX, offsetY: e.offsetY,  layerX: e.layerX, layerY: e.layerY,  screenX: e.screenX, screenY: e.screenY, 

                    altKey: e.altKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey,
                },
            })
        },
    }, // -- End of methods -- //
}
</script>

Any hints as to what is going wrong would be most welcome.