penushkin

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

computed: {
  filteredWorks() {
    const category = this.tabs.find(n => n.id === this.activeTabId)?.category;
    return category равна той, что у 'Все работы'
      ? this.works
      : this.works.filter(n => n.category === category);
  },

<div class="articles__items articles__items--works">
  <img v-for="n in filteredWorks" :key="n.id" :src="n.image">
</div>

tabs: [
  { id: '1', name: 'Все работы', category: 'doors' },
  { id: '2', name: 'Окна', category: 'windows' },
  { id: '3', name: 'Двери', category: 'doors' },

Почему у category одинаковые значения (doors)? Надо исправить.

Ну, у вас, по сути, контент зависит от номера итерации, поэтому массив можно заменить простым циклом от 0 до 10.
Но в целом, для более сложных сценариев массив - это нормальное решение.

Понадобится функция, которая позволит вложенные массивы развернуть в один плоский:

// есть вариант применить рекурсию
const flatTree = (tree, childrenKey) =>
  (tree instanceof Array ? tree : []).reduce((acc, n) => (
    acc.push(n, ...flatTree(n[childrenKey], childrenKey)),
    acc
  ), []);

// а можно обойтись и без неё
const flatTree = function*(tree, childrenKey) {
  const stack = [];

  for (let [ i, arr ] = this(tree); ++i < arr.length || stack.length;) {
    if (i === arr.length) {
      [ i, arr ] = stack.pop();
    } else {
      yield arr[i];
      stack.push([ i, arr ]);
      [ i, arr ] = this(arr[i][childrenKey]);
    }
  }
}.bind(x => [ -1, Array.isArray(x) ? x : [] ]);

Дальше всё просто - вычисляемое свойство, v-for по его значению:

computed: {
  users() {
    // если использовать обычную функцию
    return flatTree(this.elements, 'children');

    // или, генератор
    return [...flatTree(this.elements, 'children')];
  },
},

<option v-for="n in users" :key="n.id">{{ n.name }}</option>