Изображение появляется только после обновления vue-Konva

Question

Я пытаюсь отобразить изображение в Konva.Stageв приложении Vue. Однако изображение загружается только после обновления страницы или после отключенияthis.adjustImage() в image.onload. поэтому я загружаю свой образ при установке моего приложения следующим образом:

 mounted() {
  window.addEventListener('resize', this.handleStageResize)
  window.addEventListener('resize', this.adjustImage)

  this.handleStageResize()

  const image = new window.Image()
  image.src =
   // 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
   // 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'
   'https://images3.alphacoders.com/823/thumb-1920-82317.jpg'
 // 'https://wallpapercave.com/wp/wp2559551.jpg'

 this.image.width = image.width
 this.image.height = image.height

 image.onload = () => {
   // set image only when it is loaded
   this.configImage.image = image
   this.adjustImage()
 }},

вот код this.adjustImage() метод:

 adjustImage() {
  console.log('Adjusting image')

  let imageHeight = this.image.height
  let imageWidth = this.image.width
  let canvasWidth = this.configKonva.width
  let canvasHeight = this.configKonva.height
  let newHeight
  let newWidth

  if (imageHeight < imageWidth) {
    newHeight = (imageHeight / imageWidth) * canvasWidth
    newWidth = canvasWidth
    if (newHeight > canvasHeight) {
      newWidth = (imageWidth / imageHeight) * canvasHeight
      newHeight = canvasHeight
    }
  } else {
    newWidth = (imageWidth / imageHeight) * canvasHeight
    newHeight = canvasHeight
    if (newWidth > canvasWidth) {
      newHeight = (imageHeight / imageWidth) * canvasWidth
      newWidth = canvasWidth
    }
  }

  this.configImage.image.height = newHeight
  this.configImage.image.width = newWidth

  this.configKonva.width = newWidth
  this.configKonva.height = newHeight
},

в this.configImage а также this.configKonvaelements управляют размером элементов div, соответствующих изображению и сцене соответственно. изображение загружается правильно, когда я комментирую этот раздел:

  this.configImage.image.height = newHeight
  this.configImage.image.width = newWidth

  this.configKonva.width = newWidth
  this.configKonva.height = newHeight

вот шаблонный раздел приложения, если необходимо:

 <v-stage
  style="background-color: gray;display: inline-block"
  ref="stage"
  :config="configKonva"
  @mousedown="handleStageMouseDown"
  @touchstart="handleStageMouseDown"
  @mouseup="handleStageMouseUp"
  @touchend="handleStageMouseUp"
  @mousemove="handleStageMouseMove"
  @touchmove="handleStageMouseMove"
  @click="handleStageMouseClick"
  @resize="handleStageResize"
  @wheel="zoom"
>
  <v-layer ref="layer">
    <v-image ref="image" :config="configImage" />
    <div v-shortkey="['del']" @shortkey="removeObject">
      <v-rect
        v-for="item in rectangles"
        :key="item.id"
        :config="item"
        @transformend="handleTransformEnd"
      />
      <!-- <v-line v-for="item in rectangles"
        :key="item.id"
      :config="item"/>-->
      <v-transformer ref="transformer" />
    </div>
  </v-layer>

  <div v-shortkey="['p']" @shortkey="debug"></div>
  <div v-shortkey="['r']" @shortkey="reset"></div>
</v-stage>