VueJs рекурсивный бесконечный цикл v-for

Question

Я пытаюсь создать иерархическое дерево, в котором у меня есть список пользователей, и для каждого из них я устанавливаю «старший», чтобы он определял, кто является старшим. Вот как я пытаюсь решить проблему:

Вот что я делаю:

data(){
    return{
        users: [{
        id: 1,
        fname: 'Joe',
        lname: 'Smith',
        title: 'Super-Senior',
        senior_id: 0,
       }, {
        id: 2,
        fname: 'Bill',
        lname: 'Simons',
        title: 'Junior-1',
        senior_id: 0,
       }];
    }
},
methods: {
  juniors(senior) {
   return this.users.filter((user) =>
    user.senior_id == senior.id
   );
  }
}

Затем дерево компонентов:

<ul>
 <li v-for="chief in juniors(snr_chief)">
  <div class="child mx-1">{{chief.lname}} {{chief.fname}}<br /> <small>{{chief.title}}</small>
  </div>
  <ul>
   <li v-for="second in juniors(chief)">
    <div class="child mx-1">{{second.lname}} {{second.fname}}<br /> <small>{{second.title}}</small>
    </div>
    <ul>
     <li v-for="third in juniors(second)">
      <div class="child mx-1">{{third.lname}} {{third.fname}}<br /> <small>{{third.title}}</small>
      </div>
     </li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

Это работает отлично, но, конечно, доходит до 3 уровней вниз. Я на самом деле не знаю, сколько уровней может пройти пользователь.

Так что идея состоит в том, чтобы иметь рекурсивный компонент, но я не знаю, как его реализовать. Что-то вроде:

<ul>
 <li v-for="chief in juniors(snr_chief)">
  <div class="child mx-1">{{chief.lname}} {{chief.fname}}<br /> <small>{{chief.title}}</small>
  </div>
  <Repeater :juniors="snr_chief" :self="chief" />
 </li>
</ul>