[Vuejs]-How to connect 2 objects using a line using konvajs in vuejs?

There are many ways to implement such functionality. Basically, you just need to listen to mousedown, mousemove and mouseup events to understand when to draw lines. You can also add touchstart, touchmove and touchend events to support mobile devices:

<template>
  <div>
    <v-stage
      ref="stage"
      :config="stageSize"
      @mousedown="handleMouseDown"
      @mouseup="handleMouseUp"
      @mousemove="handleMouseMove"
    >
      <v-layer>
        <v-line
          v-for="line in connections"
          :key="line.id"
          :config="{
            stroke: 'black',
            points: line.points
          }"
        />
        <v-circle
          v-for="target in targets"
          :key="target.id"
          :config="{
            x: target.x,
            y: target.y,
            radius: 40,
            stroke: 'black',
            fill: 'green'
          }"
        />
        <v-text :config="{ text: 'Try to drag-to-connect objects'}"/>
      </v-layer>
      <v-layer ref="dragLayer"></v-layer>
    </v-stage>
  </div>
</template>

<script>
import Konva from "konva";
const width = window.innerWidth;
const height = window.innerHeight;
let vm = {};

function generateTargets() {
  const circles = [];
  for (var i = 0; i < 10; i++) {
    circles.push({
      x: width * Math.random(),
      y: height * Math.random(),
      id: i
    });
  }
  return circles;
}

export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      },
      targets: generateTargets(),
      connections: [],
      drawningLine: false
    };
  },
  methods: {
    handleMouseDown(e) {
      const onCircle = e.target instanceof Konva.Circle;
      if (!onCircle) {
        return;
      }
      this.drawningLine = true;
      this.connections.push({
        id: Date.now(),
        points: [e.target.x(), e.target.y()]
      });
    },
    handleMouseMove(e) {
      if (!this.drawningLine) {
        return;
      }
      const pos = e.target.getStage().getPointerPosition();
      const lastLine = this.connections[this.connections.length - 1];
      lastLine.points = [lastLine.points[0], lastLine.points[1], pos.x, pos.y];
    },
    handleMouseUp(e) {
      const onCircle = e.target instanceof Konva.Circle;
      if (!onCircle) {
        return;
      }
      this.drawningLine = false;
      const lastLine = this.connections[this.connections.length - 1];
      lastLine.points = [
        lastLine.points[0],
        lastLine.points[1],
        e.target.x(),
        e.target.y()
      ];
    }
  }
};
</script>

DEmo: https://codesandbox.io/s/vue-konva-connection-objects-qk2ps