This is my code for a tree view component, it is a recursive vue component, for generating a treeView data structure, here is my code:

<template>
  <ul class="flex flex-col gap-3 list-none p-0">
    <li v-for="event in modelValue" :key="event.uuid" class="flex flex-col gap-3 relative">
      <div class="flex items-center relative">
        <div class="w-128 border border-slate-300 rounded-md h-full min-h-[3rem]">
          {{ event.text }}
        </div>
      </div>
      <!-- Children -->
      <transition name="">
        <div v-if="event.children && isExpanded(event)" class="ml-10 list-none p-0 flex flex-col">
          <!-- Recursion -->
          <DataTreeTemplate :modelValue="event.children" />
          <!-- Ghost placeholder -->
          <div
            class="mt-2 w-full max-w-[48rem] border border-slate-300 rounded-md flex justify-center items-center bg-slate-200/50 min-h-[3rem] h-full opacity-50"
          >
            I'm ghost
          </div>
        </div>
      </transition>
    </li>
  </ul>
</template>

My goal is to add those tree connection lines:

Is there any library or someone maybe can help with this problem? Thanks!!!

This is JSON structure :

  {
    uuid: '1',
    text: 'Nestrādājošs internets',
    type: 'event',
    data: { status: 'closed', flowDirection: 'incoming' },
    children: [
      {
        uuid: '1.2',
        text: 'Savienojuma pārbaude',
        type: 'event',
        data: { status: 'closed', flowDirection: 'outgoing' },
        children: [
          {
            uuid: '1.2.3',
            text: 'Savienojums darbojas pareizi',
            type: 'event',
            data: { status: 'closed', flowDirection: 'incoming' },
          },
          {
            uuid: '1.2.4',
            text: 'Restartējiet modemu',
            type: 'event',
            data: { status: 'closed', flowDirection: 'outgoing' },
          },
        ],
      },
      {
        uuid: '182-20184-34-243',
        text: 'Klients vēlas jaunu modēmu un vispār viņs grib visu jaunu, lai nav problēmas ar internetu, jo viņas esot zb katru desmito dienu sūdzēties par interneta trūkumu!!!',
        type: 'event',
        data: { status: 'closed', flowDirection: 'incoming' },
        children: [
          {
            uuid: '1.3.3',
            text: 'Pieslēguma reģistrācija',
            type: 'event',
            data: {
              status: 'closed',
              flowDirection: 'outgoing',
            },
            children: [
              {
                uuid: '1.3.3.1',
                text: 'Pieslēgums reģistrēts, gaidiet apstiprinājumu',
                type: 'event',
                data: {
                  status: 'closed',
                  flowDirection: 'outgoing',
                },
              },
            ],
          },
        ],
      },
      {
        uuid: '1.4',
        text: 'Rēķina apmaksa',
        type: 'event',
        data: { status: 'closed', flowDirection: 'incoming' },
      },
    ],
  },

I have tried many options, but cant figure out how to draw those lines