0xD34F

Дело в том, что значение pickeds задаётся лишь единожды - при создании экземпляра компонента app-some, так что странно ожидать, что оно изменится - вы этого нигде не делаете.

Не знаю, чего конкретно вам надо, но... Чтобы чекбоксы переключились, есть варианты:

• Отказаться от внутреннего массива, использовать параметр. Типа так.
  
• Использовать computed вместо data. Типа так.
  
• Задать key для app-some, это приведёт к созданию нового экземпляра компонента при изменении activeId. Типа так.
  

handleTdClick(item) {

Интересно, а как вы собираетесь определять, какой именно элемент следует изменить, если item - число?

Вместо значения нужны его индексы:

{this.state.rows.map((row, rowIndex) => (
  <tr>
    {row.map((item, colIndex) => (
      <td
        onClick={this.onTdClick}
        data-row={rowIndex}
        data-col={colIndex}
        className={item ? 'not-empty' : 'empty'}
      >
        {item}
      </td>
    ))}
  </tr>
))}

onTdClick = ({ target: { dataset: d } }) => {
  const row = +d.row;
  const col = +d.col;

  this.setState(({ rows }) => ({
    rows: rows.map((n, i) =>
      i === row
        ? n.map((m, j) => j === col ? +!m : m)
        : n
    )
  }));
}

Вы возвращаете тот же самый массив cards (и тот же самый элемент cards, и то же самое свойство entries обновляемого элемента cards), что и был, поэтому изменений как бы и не было. Делайте копии, вот как-то так:

const addEntry = (state, action) => {
  const cards = [...state.cards];
  const index = cards.findIndex(n => n.id === action.id);
  const card = {...cards[index]};
  card.entries = [ ...card.entries, { id: Math.random().toString(36).substring(7) } ];
  cards[index] = card;
  return { cards };
};

document.querySelector('.animate-all').addEventListener('click', e => {
  e.target.hidden = true;

  forEachWithDelay(
    document.querySelectorAll('[data-color]'),
    500,
    el => el.parentNode.style.backgroundColor = el.dataset.color
  );
});

Как может выглядеть функция forEachWithDelay? Такие есть варианты:

• Сразу назначаем таймауты для всех элементов:
  
  

  function forEachWithDelay(arr, delay, callback) {
    Array.prototype.forEach.call(arr, (n, i) => {
      setTimeout(callback, (i + 1) * delay, n);
    });
  }

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

  function forEachWithDelay(arr, delay, callback) {
    (function next(i) {
      if (i < arr.length) {
        setTimeout(() => {
          callback(arr[i]);
          next(-~i);
        }, delay);
      }
    })(0);
  }

  
  
• Назначаем интервал:
  
  

  function forEachWithDelay(arr, delay, callback) {
    let i = -1;
    const intervalId = setInterval(() => {
      if (++i < arr.length) {
        callback(arr[i]);
      } else {
        clearInterval(intervalId);
      }
    }, delay);
  }

  
  

Как поменять элементу цвет его background'а:

const setBgColor = (el, color) =>
  el.style.backgroundColor = color;
  // или
  el.style.setProperty('background-color', color);
  // или
  el.style.cssText += `background-color: ${color}`;
  // или
  el.setAttribute('style', `background-color: ${color}`);

Меняем:

document.addEventListener('click', ({ target: t }) => {
  const { color } = t.dataset;
  if (color) {
    for (; t.tagName !== 'LI'; t = t.parentNode) ;
    setBgColor(t, color);
  }
});

// или

document.querySelectorAll('[data-color]').forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  setBgColor(this.closest('li'), this.getAttribute('data-color'));
});

const grouped = Object.values(arr.reduce((acc, { title, value: money }) => {
  (acc[title] = acc[title] || { title, data: [] }).data.push({ money });
  return acc;
}, {}));

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

$('#production, #col, .pay, [name="size"]').on('input', recalcPrice);
recalcPrice();

function recalcPrice() {
  const price = [
    $('#production').val(),
    ...$('.pay:checked').get().map(n => n.value),
    $('[name="size"]:checked').val(),
  ].reduce((acc, n) => acc + (n | 0), 0);

  $('#final_price').html(price * ($('#col').val() | 0));
}

const title = document.getElementById('title');
title.innerHTML = Array.from(title.innerText, n => `<span>${n}</span>`).join('');

или

const title = document.querySelector('#title');
title.innerHTML = title.textContent.replace(/./g, '<span>$&</span>');

https://jsfiddle.net/uwjg6qb3/

Уберите opacity... Или добавьте его в transition. А то сейчас у вас элемент становится прозрачным мгновенно - отсюда иллюзия, что он "просто пропадает". Не просто - двигается, так как вам и нужно, но будучи невидимым.

Проблема в том, что компонент Form, некоторые элементы которого зависят от стейта - не ререндерятся.

"Некоторые" - это, видимо, инпуты (плейсхолдеры) и кнопка (текст). Почему не обновляются - да потому, что значение isFormStateChange формы, от которого они зависят (кстати, не "от стейта" - стейта у вас там нет, что за бред-то?), устанавливается лишь единожды, в конструкторе, и изменение isFormStateChange родительского компонента никак на него не влияет.

Я так понимаю, вы стремились к чему-то такому?

cards.filter(n => n.tags.some(m => m.tag === tag))

Используйте mounted вместо created:

mounted() {
  this.$refs.textArea.addEventListener(...

То, что значение i в момент выполнения document.getElementsByClassName("desc")[i] будет тем же, что и в момент выполнения acc[i].addEventListener есть ни на чём не основанная фантазия, не соответствующая реальности.

Вот если вы объявите i в заголовке цикла с помощью let - тогда да, работать будет.

Но вообще, создавать отдельные обработчики клика для каждой кнопки и обращаться по индексу к элементам .desc нет необходимости. Можно от кликнутой кнопки подняться до .tab-pane и там переключить класс, который изменит видимость .desc:

.active .desc {
  display: block;
}

const itemSelector = '.tab-pane';
const buttonSelector = `${itemSelector} .material_info`;
const activeClass = 'active';
const toggle = el => el.closest(itemSelector).classList.toggle(activeClass);


// слушаем клики на кнопках
document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggle(e.target));

// или, применяем делегирование - назначаем обработчик один раз общему предку кнопок,
// внутри проверяем, где случился клик
document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    toggle(t);
  }
});

return abs(($a['value'] - $c_v) - ($b['value'] - $c_v)); // тут возможно бред - уже изменял 100000 раз и запутался

Да конечно бред.

Во-первых, вычислять надо не абсолютное значение разности разностей, а разность абсолютных значений разностей.

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

В общем, ваша сортировка могла бы выглядеть как-то так:

usort($arr, function($a, $b){
  $c_v = 2.6;
  return ceil(abs($a['value'] - $c_v) - abs($b['value'] - $c_v));
});

Получение случайного числа:

const random = (min, max) =>
  Math.floor(Math.random() * (max - min + 1)) + min;

Создание матрицы:

function createMatrix(rows, cols, min, max) {
  const matrix = [];

  for (let i = 0; i < rows; i++) {
    matrix.push([]);

    for (let j = 0; j < cols; j++) {
      matrix[i][j] = random(min, max);
    }
  }

  return matrix;
}

// или

const createMatrix = (rows, cols, min, max) =>
  Array.from({ length: rows }, () =>
    Array.from({ length: cols }, () =>
      random(min, max)
    )
  );

Вывод:

function outputMatrix(matrix, el) {
  const table = document.createElement('table');

  matrix.forEach(function(n) {
    const tr = this.insertRow();
    n.forEach(m => tr.insertCell().textContent = m);
  }, table.createTBody());

  el.appendChild(table);
}

// или

function outputMatrix(matrix, el) {
  el.insertAdjacentHTML('beforeend', `
    <table>
      <tbody>${matrix.map(n => `
        <tr>${n.map(m => `
          <td>${m}</td>`).join('')}
        </tr>`).join('')}
      </tbody>
    </table>
  `);
}

Как всем этим пользоваться:

outputMatrix(createMatrix(5, 5, 10, 30), document.body);

Так?

что-то мне подсказывает, что сам подход не верен

Ну в общем да, проблемка есть - унеся всю логику в computed (чего вообще делать не надо, т.к. computed для подобного не предназначены), затруднительно определить, какой из чекбоксов изменил последним своё состояние. Если выбран один чекбокс "секция №" и "все", что надо делать - снять первый или второй? Непонятно.

возможно вообще стоит разделить all и остальной список чекбоксов?

Да, так тоже можно.

Умножение на два - это сдвиг на один бит влево. Умножение на четыре - сдвиг на два бита. Ну и т.д. То есть, если числа полбайтовые, то умножать надо на шестнадцать. Первое число на шестнадцать в нулевой степени, второе на шестнадцать в первой степени, третье на шестнадцать во второй степени и т.д. Результаты умножения складываете, вот и всё.

moment.js:

moment(date).format('DD.MM.YYYY')

или

[
  `${date.getDate()}`.padStart(2, 0),
  `${date.getMonth() + 1}`.padStart(2, 0),
  date.getFullYear(),
].join('.')

или

date.toLocaleDateString('ru-RU')