如何在vuejs中使用konvajs连接两个对象？

import Konva from 'konva';

mounted() {
  const stage = new Konva.Stage({
    container: 'stage-container',
    width: 800,
    height: 600
  });

  const layer = new Konva.Layer();
  stage.add(layer);
}

mounted() {
  // ...

  const circle1 = new Konva.Circle({
    x: 100,
    y: 100,
    radius: 50,
    fill: 'red'
  });

  const circle2 = new Konva.Circle({
    x: 300,
    y: 200,
    radius: 50,
    fill: 'blue'
  });

  layer.add(circle1);
  layer.add(circle2);

  // ...
}

mounted() {
  // ...

  const line = new Konva.Line({
    points: [circle1.x(), circle1.y(), circle2.x(), circle2.y()],
    stroke: 'green',
    strokeWidth: 2
  });

  layer.add(line);

  // ...
}

data() {
  return {
    circle1: {
      x: 100,
      y: 100
    },
    circle2: {
      x: 300,
      y: 200
    }
  };
},
mounted() {
  // ...

  const line = new Konva.Line({
    points: [this.circle1.x, this.circle1.y, this.circle2.x, this.circle2.y],
    stroke: 'green',
    strokeWidth: 2
  });

  layer.add(line);

  // ...
}

beforeDestroy() {
  stage.destroy();
}