Vue v-for & v-if not rendering canvas

[Kostas Zotos]

Using "vue": "^2.6.10", it seems that i cannot render multiple canvas in a v-for in Vue, also seems to be the same problem with v-if.

Tried the vue2-canvas-guage & the vue-canves-guage packages too, but same issue

Is there a workaround ?
Thanks

example:

<el-row :gutter="20" v-for="item in attributes" :key="item.id">
    <el-col :span="8" v-if="item.node_attribute_id == 2">
        <div class="grid-content">
            <div class="attribute-title">Air Temperature</div>
            <canvas
              data-type="linear-gauge"
              data-width="120"
              data-height="200"
              data-units="°C"
              data-min-value="0"
              data-max-value="100"
              data-major-ticks="0,20,40,60,80,100"
              data-minor-ticks="5"
              data-stroke-ticks="true"
              data-highlights='[ {"from": 38, "to": 100, "color": "rgba(200, 50, 50, .75)"} ]'
              data-color-plate="#fff"
              data-border-shadow-width="0"
              data-borders="false"
              data-needle-type="arrow"
              data-needle-width="2"
              data-animation-duration="1500"
              data-animation-rule="linear"
              data-tick-side="left"
              data-number-side="left"
              data-needle-side="left"
              data-bar-stroke-width="2"
              data-bar-begin-circle="false"
              data-value="35"
            ></canvas>
        </div>
    </el-col>
<el-row>

Image issue:

3 canvas that are not rendering, are inside the v-for and have v-if | The one rendering, has NO v-for and NO v-if

https://pasteboard.co/JXkaKDD.png

[Kostas Zotos]

using watchers and v-show and rendering it inside a foreach, assigning this.attribute.airTemperaute = new LinearGauge fixed the probelm. FOr anyone with the same issue, and using renderTo: document.querySelector('#air-temperature'),