Gauge.js Component under Vue.js 3.2.1 not Creating - vuejs2

Question

"Hi, I'm trying to get a simple gauge.js to work under Vue.js v3.2.1. The document reference get is always returning a null so that the mounted function never completes. This should be a simple thing, but I fear I am missing knowledge somewhere as I am new to Vue.js & can't find anything to help. "
<template >
<canvas ref="foo"></canvas>
</template>
<script>
import { Gauge } from 'gauge.js'
export default
{
name: 'vcGaugeJs',
props:
{
value: {type: Number, default: 0},
//options: { type: Object, default: () => ({}) }
},
data()
{
return
{
gauge: null
}
},
mounted: function ()
{
this.initGauge();
},
watch:
{
value: function (val)
{
this.gauge.set(val);
},
},
updated: function()
{
if (this.gauge == null)
{
this.initGauge();
}
},
methods:
{
initGauge ()
{
let opts =
{
angle: 0, // The span of the gauge arc
lineWidth: 0.35, // The line thickness
radiusScale: 1, // Relative radius
pointer:
{
length: 0.53, // // Relative to gauge radius
strokeWidth: 0.057, // The thickness
color: '#000000' // Fill color
},
limitMax: false, // If false, max value increases automatically if value > maxValue
limitMin: false, // If true, the min value of the gauge will be fixed
colorStart: '#6F6EA0', // Colors
colorStop: '#C0C0DB', // just experiment with them
strokeColor: '#EEEEEE', // to see which ones work best for you
generateGradient: true,
highDpiSupport: true // High resolution support
}
var target = this.$refs.foo;
if (target == null)
{
console.log ("Null target ref!");
}
else
{
this.gauge = new Gauge(this.$refs.foo);
this.gauge.maxValue = 3000; // set max gauge value
this.gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
this.gauge.animationSpeed = 62; // set animation speed (32 is default value)
this.gauge.set(1700); // set actual value
this.gauge.setOptions(opts); // create gauge!
}
}
},
}

Answer 1

Here's what the dev team says:
If you look at the lifecycle digram you can see that when the created() hook is called, the component’s template/render function has not been compiled.
So in your case, you should be able to instantiate the gauge at mounted hook on vm.$el instead, with it being the canvas element.
mounted() {
this.initGauge();
},
methods: {
initGauge() {
let opts = { /* options */}
this.gauge = new Gauge(this.$el).setOptions(opts);
this.gauge.maxValue = 3000; // set max gauge value
this.gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
this.gauge.animationSpeed = 62; // set animation speed (32 is default value)
this.gauge.set(1700); // set actual value
}
}