How to pass generated canvas element to child component in Vue?

I have an component with button. In parent component I generated canvas element and sended them it to child. Can I send generated canvas element to child component another way? Task is to make component with button and canvas as background and generate several such components.

Vue component LutButton:

<template>
  <div id="container">

    <v-btn id="button"
           :width="width" 
           :height="height" 
           @click="buttonHandler()">
    </v-btn>

  </div>
</template>

<script>
export default {
  props: {
    buttonHandler: Function,
    width: Number,
    height: Number,
    canvas: HTMLCanvasElement 
  }
};
</script>

Parent vue component:

<template>
  <div>
    <div id="main-content-styles" align="center">
      <LutButton
        ref="lut"
        :buttonHandler="myHandler"
        :width="width"
        :height="height"
        :canvas="canvas"
      ></LutButton>
    </div>

    <img id="photo" :src="imagePath" />

    <v-btn block text small @click="renderCanvas">Render</v-btn>

  </div>
</template>

<script>
var ndarrayFromImage = require("ndarray-from-image");
var canvasFromNdarray = require("canvas-from-ndarray");

export default {
  data() {
    return {
      imagePath: ''
      width: 0,
      height: 0,
      canvas: ''
    };
  },
  methods: {

    myHandler() {
      //do some action;
    },

    async renderCanvas() {

      var img = document.getElementById("photo");

      var ndarray = ndarrayFromImage(img, "float32");
      this.canvas = await canvasFromNdarray(ndarray );

      this.width = this.canvas.width;
      this.height = this.canvas.height;

      var lutButton = this.$refs.lut.$el;

      LutButton.insertBefore(this.canvas, elem.firstChild);
    },
  }
};
</script>