0xD34F

Рекурсия есть:

const find = (obj, key, val) =>
  obj instanceof Object
    ? Object.is(obj[key], val)
      ? obj
      : Object.values(obj).reduce((found, n) => found ?? find(n, key, val), null)
    : null;

Рекурсии нет:

function find(obj, key, val) {
  for (const stack = [ obj ]; stack.length;) {
    const n = stack.pop();
    if (n instanceof Object) {
      if (n[key] === val) {
        return n;
      }

      stack.push(...Object.values(n));
    }
  }

  return null;
}

Ищем: const obj = find(fractal, 'id', id);.

Будем использовать стек. В начале стек содержит единственное значение - то, которое передано в функцию. Цикл крутится до тех пор, пока стек не окажется пуст. На каждой итерации извлекаем значение из стека, если число - плюсуем к результату, если объект - добавляем значения его свойств в стек.

function sum(data) {
  let result = 0;

  for (const stack = [ data ]; stack.length;) {
    const n = stack.pop();
    stack.push(...(n instanceof Object ? Object.values(n) : []));
    result += typeof n === 'number' ? n : 0;
  }

  return result;
}

data: () => ({
  items: [
    { text: '...', price: ..., checked: false },
    { text: '...', price: ..., checked: false },
    ...
  ],
}),
computed: {
  sum() {
    return this.items.reduce((acc, n) => acc + n.price * n.checked, 0);
  },
},

<div v-for="n in items">
  <label>
    <input v-model="n.checked" type="checkbox">
    {{ n.text }}
  </label>
</div>
<div>SUM: {{ sum }}</div>

$grouped = [];

foreach ($arr as [ 'parent' => $p, 'sub' => $s ]) {
  $grouped[$p] ??= [ 'parent' => $p, 'sub' => [] ];
  $grouped[$p]['sub'][] = $s;
}

$grouped = array_values($grouped);

const [ text, setText ] = useState('');
const [ swiper, setSwiper ] = useState(null);

useEffect(() => {
  if (swiper && text какой там вам нужен) {
    swiper.slideNext();
  }
}, [ swiper, text ]);

<Swiper
  onSwiper={setSwiper}
  ...

<input
  value={text}
  onChange={e => setText(e.target.value)}
  ...

debounce(getData(), 2000);

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

Кроме того, debounced функция при каждом рендере компонента должна быть одна и та же, так что завернём её в useCallback, а чтобы она использовала актуальное состояние, будем передавать его как параметр:

const getData = useCallback(debounce(query => {
  /*
   * здесь всё по-старому, кроме body: JSON.stringify({ query: state.query }),
   * надо заменить на body: JSON.stringify({ query }),
   */
}, 2000), []);

useEffect(() => {
  getData(state.query);
}, [ state.query ]);

data: () => ({
  year: null,
  month: null,
  day: null,
}),
computed: {
  daysCount() {
    const { year, month } = this;
    return year !== null && month !== null
      ? new Date(this.year, this.month + 1, 0).getDate()
      : 0;
  },
  date() {
    const { year, month, day } = this;
    return year !== null && month !== null && day !== null
      ? new Date(year, month, day)
      : null;
  },
},
watch: {
  daysCount(val) {
    if (this.day) {
      this.day = Math.min(this.day, val);
    }
  },
},

<select v-model="year">
  <option v-for="i in 30">{{ 2000 + i }}</option>
</select>
<select v-model="month">
  <option v-for="i in 12" :value="i - 1">
    {{ new Date(0, i - 1).toLocaleDateString('ru-RU', { month: 'long' }) }}
  </option>
</select>
<select v-model="day">
  <option v-for="i in daysCount">{{ i }}</option>
</select>

Добавить в options interpolateNulls: true.

Элемент и его сосед:

const el = вам виднее, откуда он берётся;
const prev = el.previousElementSibling;

Меняем местами:

el.after(prev);

// или

el.insertAdjacentElement('afterend', prev);

// или

el.parentNode.insertBefore(el, prev);

// или

el.replaceWith(el, prev);

https://jsfiddle.net/duja84ys/

data: () => ({
  headers: [
    { key:       'name', label:       'ФИО' },
    { key: 'department', label:     'Отдел' },
    { key:   'position', label: 'Должность' },
    { key:   'hostname', label:    'Имя ПК' },
    { key:   'username', label:    'Учётка' },
  ],
  ...

<thead>
  <tr>
    <th v-for="n in headers">{{ n.label }}</th>
  </tr>
</thead>
<tbody>
  <tr v-for="employee in employees">
    <td v-for="n in headers" :data-label="n.label">{{ employee[n.key] }}</td>
  </tr>
</tbody>

<label>
  Город:
  <select id="city"></select>
</label>
<label>
  Линия:
  <select id="line"></select>
</label>
<label>
  Станция:
  <select id="station"></select>
</label>

fetch('https://api.hh.ru/metro/').then(r => r.json()).then(subwayData => {
  const city = document.querySelector('#city');
  const line = document.querySelector('#line');
  const station = document.querySelector('#station');

  const getLines = () => subwayData[city.value].lines;
  const update = (el, data) => {
    el.replaceChildren(...data.map((n, i) => new Option(n.name, i)));
    el.dispatchEvent(new Event('change'));
  };

  city.addEventListener('change', () => update(line, getLines()));
  line.addEventListener('change', () => update(station, getLines()[line.value].stations));

  update(city, subwayData);
});

.inputmask('aa\\|9999',

выводит не совсем то что мне надо

Вместо array.length надо крутить цикл до array.length - n + 1.

А вообще, цикл в явном виде не нужен:

const bullshitChunks = (arr, chunkSize) =>
  Array.from(
    { length: arr.length + 1 - chunkSize },
    (_, i) => arr.slice(i, i + chunkSize)
  );


console.log(bullshitChunks([ 1, 2, 3, 4, 5, 6, 7 ], 4));
console.log(bullshitChunks('abcdefg', 5));

(products.find(n => n.product.id === newProduct.id) ??
(products[products.length] = {
  product: { ...newProduct },
  count: 0,
})).count++;

const el = useRef();

useEffect(() => {
  const onClick = e => {
    const dropdown = e.target.closest('.dropdown');
    if (dropdown && dropdown !== el.current) {
      setIsVisible(false);
    }
  };

  document.addEventListener('click', onClick);

  return () => {
    document.removeEventListener('click', onClick);
  };
}, []);

<div className="dropdown" ref={el}>

data: () => ({
  columns: [
    { field: '...', label: '...' },
    { field: '...', label: '...' },
    ...
  ],
  focused: {},
  ...
}),
methods: {
  rowStyle(row) {
    return row === this.focused.record && {
      backgroundColor: 'red',
    };
  },
  cellStyle(row, cell) {
    return cell.name === this.columns[this.focused.colPos]?.field && {
      backgroundColor: 'orange',
    };
  },
},

<vue-excel-editor
  :row-style="rowStyle"
  :cell-style="cellStyle"
  @cell-focus="focused = $event"
  ...
>
  <vue-excel-column
    v-for="n in columns"
    v-bind="n"
    :key="n.field"
  />
</vue-excel-editor>

Помимо массива с данными держите в стейте ссылку на следующую страницу:

state: {
  pokemons: [],
  next: 'https://pokeapi.co/api/v2/pokemon',
},

Используйте её для запроса данных, при получении ответа не забывайте сохранять новую ссылку:

actions: {
  async fetchPokemons({ state, commit }) {
    const data = await fetch(state.next).then(r => r.json());

    commit('setPokemons', {
      pokemons: data.results,
      next: data.next,
    });
  }
},

Также можете использовать значение этой ссылки для блокирования кнопки, по нажатию на которую инициируется загрузка следующей порции данных, если больше загружать нечего:

<button
  :disabled="!$store.state.next"
  @click="$store.dispatch('fetchPokemons')"
>
  NEXT
</button>

https://jsfiddle.net/yb2seq6m/

Но вообще, никакая "следующая" страница тут не нужна. Храните номер текущей страницы и количество элементов на странице, исходя из этих данных самостоятельно вычисляйте значение параметра offset. Когда понадобится следующая - делаете +1 к текущей. Например.