0xD34F

Не надо indexOf, индексы доступны в v-for без каких-либо дополнительных телодвижений:

<div v-for="(row, iRow) in rows" class="board__rows">
  <div
    v-for="(col, iCol) in columns"
    v-text="col + row"
    :class="[ [ 'white', 'black' ][(iRow ^ iCol) & 1], 'board__square' ]"
  ></div>
</div>

Всё обновляется корректно. Что написали, то и получили.

Почему всегда рендерятся все экземпляры Child2 - потому что вместо обновления одного элемента data.list вы всегда обновляете все.

Почему значения сбрасываются на дефолтные - потому что из-за useCallback data у вас всегда имеет начальное значение (ну, то, что было при первом рендеринге, то, которое initialData).

Переделываем:

Компонент Parent, обработчик onChange передаваемый в Child1, пусть вместо значения обновляемого свойства получает функцию, которая будет принимать предыдущее значение и возвращать новое:

React.useCallback((key, val) => {
  setData(data => ({
    ...data,
    [key]: val(data[key]),
  }));
}, [])

Ну и переписываем его вызовы внутри Child1:

onChange('list', list => list.map((n, i) => i === index
  ? { ...n, [prop]: value }
  : n
))

onChange('description', () => e.target.value)

const filter = (arr, conditions) =>
  arr.filter(
    function(n) {
      return this.every(([ k, values ]) => values.some(v => v.includes(n[k])));
    },
    Object
      .entries(conditions)
      .map(n => [ n[0], [].concat(n[1]).map(String) ])
      .filter(n => n[1].length)
  );

А лучше всего просто объяснить что бы я в итоге допер сам!

Объясняю: включаешь голову, думаешь, гуглишь, ещё думаешь, делаешь. Вот так всё просто.

Cannot read properties of undefined (reading 'lastname')

Понятно, смотрим, где есть попытка чтения свойства lastname.

async addNewEmployee({ commit }, employee) {
    await axios
        .post(`http://127.0.0.1:8000/api/v1/employees/`, {
            lastname: employee.lastname,

Тоже понятно, смотрим, где вызывается addNewEmployee и что туда передаётся.

@submit.prevent="addNewEmployee(employee)"

А вот здесь непонятно - что такое employee? Такого свойства в компоненте нет. Надо добавить. Его содержимым будет то, что сейчас находится в хранилище - firstname, lastname, number - там, в хранилище, этим данным делать нечего.

const { drawImage } = canvas.getContext('2d') as CanvasRenderingContext2D;

drawImage(
  ...

Откуда вы взяли, что методы контекста можно вызывать в отрыве от, м-м-м, КОНТЕКСТА?

Что у вас происходит, поясняю на пальцах:

const obj = {
  fucking_value: 666,
  fucking_method() {
    if (!this.hasOwnProperty('fucking_value')) {
      throw 'FUCK OFF';
    }

    console.log(this.fucking_value);
  },
};

const { fucking_method } = obj;
fucking_method();

https://vuejs.org/api/sfc-script-setup.html#define...

document.querySelector('.form').addEventListener('input', e => {
  const data = Array.from(
    e.currentTarget.children,
    n => Array.from(n.querySelectorAll('input'), m => m.value)
  );

  document.querySelector('.total').innerText = Array
    .from(document.querySelectorAll('.row'))
    .reduce((acc, n, i) => {
      data[i].forEach((m, j) => n.children[j + 1].innerText = m);
      return acc + (+data[i].at(-1) || 0);
    }, 0);
});

или

const total = document.querySelector('.total');
const form = document.querySelector('.form');
const formRows = form.getElementsByClassName('d-flex');
const tableRows = document.getElementsByClassName('row');

form.addEventListener('input', ({ target: t }) => {
  const inputBox = t.closest('.input-box');
  const formRow = inputBox.parentNode;
  const iRow = Array.prototype.indexOf.call(formRows, formRow);
  const iCol = -~Array.prototype.indexOf.call(formRow.children, inputBox);

  tableRows[iRow].cells[iCol].textContent = t.value;

  if (iCol === formRow.children.length) {
    total.textContent = Array.prototype.reduce.call(
      formRows,
      (acc, n) => acc + (n.lastElementChild.children[0].value | 0),
      0
    );
  }
});

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

const flat = (arr, childrenKey) =>
  arr instanceof Array
    ? arr.flatMap(({ [childrenKey]: c, ...n }) => [ n, ...flat(c, childrenKey) ])
    : [];


const result = flat(items, 'children');

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

function flat(arr, childrenKey) {
  const result = [];

  for (const stack = [...arr].reverse(); stack.length;) {
    const { [childrenKey]: c, ...n } = stack.pop();

    if (Array.isArray(c) && c.length) {
      stack.push(...[...c].reverse());
    }

    result.push(n);
  }

  return result;
}

// или

function flat(arr, childrenKey) {
  const result = [];
  const stack = [];

  for (let i = 0; i < arr.length || stack.length; i++) {
    if (i === arr.length) {
      [ i, arr ] = stack.pop();
    } else {
      const { [childrenKey]: c, ...n } = arr[i];

      if (c?.constructor === Array && c.length) {
        stack.push([ i, arr ]);
        [ i, arr ] = [ -1, c ];
      }

      result.push(n);
    }
  }

  return result;
}

// или

function flat([...arr], childrenKey) {
  for (const [ i, { [childrenKey]: c, ...n } ] of arr.entries()) {
    arr.splice(i, 1, n, ...(c?.[Symbol.iterator] && typeof c !== 'string' ? c : []));
  }

  return arr;
}

Если завернуть объект в Proxy, можно будет изменять ключи при обращениях к объекту:

const obj = new Proxy({}, {
  get(target, key) {
    const lowerKey = key.toLowerCase();
    return target[Object.hasOwn(target, lowerKey) ? lowerKey : key];
  },
  set(target, key, val) {
    target[key.toLowerCase()] = val;
    return true;
  },
  has(target, key) {
    return key in target || key.toLowerCase() in target;
  },
  defineProperty(target, key, descriptor) {
    return Object.defineProperty(target, key.toLowerCase(), descriptor);
  },
  deleteProperty(target, key) {
    return delete target[key.toLowerCase()];
  },
  getOwnPropertyDescriptor(target, key) {
    return Object.getOwnPropertyDescriptor(target, key.toLowerCase());
  },
});

const merge = (key, ...arrs) =>
  Object.values(arrs.reduce((acc, arr) => (
    arr.forEach(n => Object.assign(acc[n[key]] ??= {}, n)),
    acc
  ), {}));


const result = merge('id', sum, arr1, arr2);

или

const merge = (key, ...arrs) =>
  Array.from(arrs
    .flat()
    .reduce((acc, n) => {
      const k = key(n);
      return acc.set(k, Object.assign(acc.get(k) ?? {}, n));
    }, new Map)
    .values()
  );


const result = merge(n => n.id, sum, arr1, arr2);

должен быть более лаконичный способ, чем плодить такие переменные

Смотрите, где какие куски кода есть похожие, оформляете их в отдельный компонент. А что у них разного - будет параметрами этого компонента.

Или это считается нормальной практикой?

Да, считается. У говнокодеров.

const result = arr.map(function(n) {
  return this[n];
}, Object.fromEntries(sum.map(n => [ n.id, n.name ])));

// или

const names = new Map(sum.map(n => [ n.id, n.name ]));
const result = arr.map(n => names.get(n));

// или

const result = arr.map(n => sum.find(m => m.id === n)?.name);

Но что если в массиве sum отсутствуют некоторые из нужных элементов, а получать undefined внутри массива с результатами не хочется?

Можно подставлять вместо отсутствующих элементов какое-нибудь дефолтное значение:

const result = arr.map(function(n) {
  return this[n] ?? 'объекта с таким id нет';
}, Object.fromEntries(sum.map(n => [ n.id, n.name ])));

Или есть вариант получать только то, что существует:

const names = new Map(sum.map(n => [ n.id, n.name ]));
const result = arr.reduce((acc, n) => (names.has(n) && acc.push(names.get(n)), acc), []);

Встречный вопрос - почему вы решили, что класс должен меняться? Может, всё-таки стоит почаще заглядывать в документацию, а?

app.ifScroll =

Меняйте эту чушь на ifScroll.value =.

document.querySelectorAll('.parent').forEach((n, i) => {
  n.insertAdjacentHTML('beforeend', `<div class="child">${arr[i]}</div>`);
});

или

for (const [ i, n ] of document.querySelectorAll('.parent').entries()) {
  const div = document.createElement('div');
  div.className = 'child';
  div.textContent = arr[i];
  n.append(div);
}

или

$('.parent').append(i => `<div class="child">${arr[i]}</div>`);

\.[a-z]+(-[a-z]+)*

const [ checked, setChecked ] = React.useState(false);

<input
  type="checkbox"
  checked={checked}
  onChange={e => setChecked(e.target.checked)}
  ...

<button
  disabled={!checked}
  ...

нет примера их использования

И не должно быть - всё более чем очевидно.

Конечно, для тех, кто о vue хоть что-то знает - например, что у vue есть документация. Тогда можно её открыть и прочитать там про ref:

<q-select
  ref="select"
  ...

<q-btn
  @click="$refs.select.showPopup()"
  ...

const createArr = length =>
  Array.from({ length }, (_, i) =>
    Array.from({ length }, (_, j) =>
      (i === j || i === length - j - 1) +
      ((i <= j && i <= length - j - 1) || (i >= j && i >= length - j - 1))
    )
  );