Vuex Store + PixiJs using Mounted to render too soon? - vue.js

Question

If I edit on the code then suddenly the connections will render in the browser, but on initial load in the browser they do no display and its appear the array configConnections is not ready / empty, so do I need to call drawPixi() later somehow ? maybe use nexttick? or am I missing something here should it be async ?
<template>
<div class="connections">
<canvas id="pixi"></canvas>
</div>
</template>
<script>
import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'
export default {
name: 'ConnectionsLayer',
computed: mapState({
configConnections: (state) => state.configConnections,
}),
methods: {
drawPixi() {
var i
var canvas = document.getElementById('pixi')
const app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
antialias: true,
transparent: true,
view: canvas,
})
let graphics = new PIXI.Graphics()
graphics.lineStyle(8, 0xcab6ff)
for (i = 0; i < Object.keys(this.configConnections).length; i++) {
//start
graphics.moveTo(
this.configConnections[i].x_pos_start,
this.configConnections[i].y_pos_start
)
//end
graphics.lineTo(
this.configConnections[i].x_pos_end,
this.configConnections[i].y_pos_end
)
}
app.stage.addChild(graphics)
},
},
mounted() {
this.drawPixi()
},
}
</script>

Answer 1

<div class="connections">
<canvas ref="pixi" id="pixi"></canvas>
</div>
</template>
<script>
import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'
export default {
name: 'ConnectionsLayer',
computed: mapState({
configConnections: (state) => state.configConnections,
}),
watch: {
configConnections: {
deep: true,
handler() {
this.drawPixi()
},
},
},
methods: {
drawPixi() {
var i
this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
let graphics = new PIXI.Graphics()
graphics.lineStyle(8, 0xcab6ff)
for (i = 0; i < Object.keys(this.configConnections).length; i++) {
//start
graphics.moveTo(
this.configConnections[i].x_pos_start,
this.configConnections[i].y_pos_start
)
//end
graphics.lineTo(
this.configConnections[i].x_pos_end,
this.configConnections[i].y_pos_end
)
}
for (var j = stage.children.length - 1; j >= 0; j--) {
stage.removeChild(stage.children[j])
}
stage.addChild(graphics)
},
},
mounted() {
const canvas = this.$refs.pixi
this.PIXIApp = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
antialias: true,
transparent: true,
view: canvas,
})
this.drawPixi()
},
}