VueJs recursive infinite v-for loop

I'm trying to achieve a hierarchy tree where I have a user list and for each of them I set a "senior", so it defines who the senior is. This is how I'm trying to solve the problem:

This is what I'm doing:

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
   );
  }
}

Then the component tree:

<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>

This works perfectly, but of course goes as far as 3 levels down. I actually don't know how many levels deep the user may go.

So the idea is to have a recursive component but I don't know how to implement it. Something like:

<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>