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">
<ul>
<li v-for="(statusGroup, status) in groupedItems">
<h2>{{ status }}</h2>
<ul>
<li v-for="(positionGroup, position) in statusGroup">
<h3>{{ position }}</h3>
<ul>
<li v-for="n in positionGroup">{{ n.name }}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JavaScript
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() {
const { items } = this;
const statuses = [...new Set(items.map(n => n.status))];
const positions = [...new Set(items.map(n => n.position))];
return items.reduce(
(acc, n) => (acc[n.status][n.position].push(n), acc),
Object.fromEntries(statuses.map(status => [
status,
Object.fromEntries(positions.map(position => [
position,
[]
]))
]))
);
},
},
});