JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <v-tree :items="groupedItems"></v-tree>
</div>

<template id="v-tree">
  <ul v-if="items instanceof Object">
    <li v-for="n in items">
      <b>{{ n.name }}</b>
      <v-tree :items="n.children"></v-tree>
    </li>
  </ul>
</template>

JavaScript

const group = (arr, keys) =>
  arr.reduce((acc, n) => {
    keys.reduce((g, k, i, a) => {
      const name = n[k];
      return (g[name] = g[name] || {
        name,
        children: i === a.length - 1 ? [] : {},
      }).children;
    }, acc).push(n);

    return acc;
  }, keys.length ? {} : []);

Vue.component('v-tree', {
  props: [ 'items' ],
  template: '#v-tree',
});

new Vue({
  el: '#app',
  data: () => ({
    items: [
      { name: 'Григорий', position: 'разработчик', status:    'работает' },
      { name:  'Алексей', position:  'маркетолог', status: 'не работает' },
      { name:    'Жанна', position:  'маркетолог', status:    'работает' },
      { name:  'Василий', position: 'разработчик', status: 'не работает' },
      { name:  'Татьяна', position: 'разработчик', status:    'работает' },
      { name: 'Виктория', position:  'маркетолог', status:    'работает' },
      { name: 'Кристина', position: 'разработчик', status: 'не работает' },
    ],
  }),
  computed: {
    groupedItems() {
      return group(this.items, [ 'status', 'position' ]);
    },
  },
});