0xD34F

const str = 'qwe//qwe';
const reg = /(qwe\/).*(\/qwe)/;
const replacement = 'hello, world!!';
const newStr = str.replace(reg, `$1${replacement}$2`);

Можно указывать несколько свойств, каждое со своим временем анимации, через запятую. Типа так:

transition: color 1s, background-color 5s;

<button>add</button>

document.querySelector('button').addEventListener('click', function() {
  document.body.appendChild(document.createElement('div'));
});

div {
  height: 50px;
  margin: 5px;
  background: red;
  animation: show-div 3s;
}
@keyframes show-div {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Сделайте отдельный метод:

@click="onClick"

methods: {
  onClick() {
    this.myVueMeth1();
    this.myVueMeth2();
    document.forms[0].submit();
  },
},

UPD. Конечно, вы можете определить computed свойство для document, типа так:

computed: {
  document() {
    return document;
  },
},

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

if (cell.textContent === num) {

Дайте-ка угадаю - num, это число, да? Сенсация! Шок! - число не может быть равно строке.

Сравнивайте с приведением типов:

if (cell.textContent == num) {

Или явным образом приводите значения к одному типу:

// строку в число
if (+cell.textContent === num) {

// число в строку
if (cell.textContent === `${num}`) {

Дело в том, что значение 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);
  }
});