Hi @Anna.fae,
can you send me the data you are binding? Are they the same?
One difference on your usecase may be that the array is empty, then populated when you bind the formula (or when your collection is fetch if your formula depends on a collection).
Is your component reacting to a change of the inputArray value ?
Hi @Anna.fae,
as i guessed, your code does not react to variable change
Move the images data to a computed, so that your data is always up to date
Add a watch to your images after mount, so that your canvas is always synchronise with your data
<template>
<div class="my-element">
<p :style="textStyle">I am a custom element !</p>
<canvas ref="canvas" width="800" height="800" style="border:1px solid #d3d3d3;">
</canvas>
</div>
</template>
<script>
import { computed, ref } from 'vue';
export default {
computed: {
images() { return this.content.inputArray } // here you can also check that the data are valid or you can do it on the drawImages method
},
watch: {
images() {
this.drawImages(this.images);
}
}
},
Hope this help, let me know if you need more explanations