Если вы хотите изменять что-то внутри канваса, путём того, что меняются значения props, то просто вешайте watch на нужные вам свойства и вызывайте те или иные методы отрисовки канваса.
// MyCanvas.vue
<template>
<canvas ref="canvas" width="150" height="150"/>
</template>
<script>
export default {
props: {
prop1: {
type: String,
default: null
},
prop2: {
type: Number,
default: 0
}
},
data: () => ({
ctx: null
}),
watch: {
prop1 (value) {
// Изменилось значение свойства prop1, рисуем квадрат
this.ctx.fillRect(10, 10, 55, 50);
},
prop2 (value) {
// Изменилось значение свойства prop2, рисуем ещё квадрат
this.ctx.fillRect(30, 30, 55, 50);
},
},
mounted () {
if (!this.ctx) {
this.ctx = this.$refs.canvas.getContext("2d");
}
}
}
</script>
