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 flat = (arr, childrenKey = 'children') =>
  (arr instanceof Array ? arr : []).reduce((acc, n) => (
    acc.push(n, ...flat(n[childrenKey], childrenKey)),
    acc
  ), []);

// или, если нужны копии объектов без ссылок на массивы вложенных объектов:
const flat = (arr, childrenKey = 'children') =>
  Array.isArray(arr)
    ? arr.flatMap(({ [childrenKey]: c, ...n }) => [
        n,
        ...flat(c, childrenKey),
      ])
    : [];

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

computed: {
  users() {
    return flat(this.elements);
  },
},

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