FriJ

Заходи в настройки. В поиске введи "tree indent" и меняй значение

Надо сделать вычисляемое свойство, где плоский массив будет преобразовываться в подходящую структуру данных.

Если знаете заранее, как всё должно выглядеть, тогда можно сделать так, например:

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,
          []
        ]))
      ]))
    );
  },
},

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

В более общем случае для отображения данных понадобится рекурсивный компонент:

name: 'v-tree',
props: [ 'items' ],

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

И функция группировки массива по произвольному количеству свойств:

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 ? {} : []);

Использоваться оно будет как-то так:

computed: {
  groupedItems() {
    return group(this.items, [ 'status', 'position' ]);
  },
},

<v-tree :items="groupedItems" />

Добавляете элементам data-атрибуты, в зависимости от того, за какую часть имени отвечают их значения. Слушаете событие input - собираете значения, из значений собираете имена. Как-то так:

<select data-prop="type">
  <option hidden></option>
  <option value="type1">hello, world!!</option>
  <option value="type2">fuck the world</option>
  <option value="type3">fuck everything</option>
</select>
<br>
<input placeholder="name1" data-prop="name">
<input placeholder="name2" data-prop="name">
<input placeholder="name3" data-prop="name">
<br>
<input placeholder="url1" data-prop="url">
<input placeholder="url2" data-prop="url">
<input placeholder="url3" data-prop="url">
<br>
<input class="value" disabled>
<input class="value" disabled>
<input class="value" disabled>

const getValues = prop =>
  Array.from(document.querySelectorAll(`[data-prop="${prop}"]`), n => n.value);


document.addEventListener('input', e => {
  if (!e.target.dataset.prop) {
    return;
  }

  const type = getValues('type')[0];
  const names = getValues('name');
  const urls = getValues('url');

  document.querySelectorAll('.value').forEach((n, i) => {
    n.name = n.value = `xxx[${type}][${names[i]}][${urls[i]}]`;
  });
});