0xD34F

Перед push'ем делайте проверку наличия нужного массива, если отсутствует, создайте его:

if (!formElementsByGroup[formType]) {
  formElementsByGroup[formType] = [];
}

А вообще, можно и покороче всё это записать:

const formElementsByGroup = formElements.reduce((acc, n) => {
  const type = searchForm[n].formType;
  (acc[type] = acc[type] || []).push(n);
  return acc;
}, {});

почему при закрытии через метод Close - окно потом не открывается?!?!

Открывается. Если использовать vue версии 1. Во второй, да - облом. У вас какая? - почему-то мне кажется, что вы об этом даже не задумывались. Ну, то есть - раз не работает как надо, значит вторая, но если вторая то... Какого хрена? - вы пытаетесь менять параметр компонента:

this.show = false;

указываете вырезанный twoWay:

show: {
  required: true,
  type: Boolean,                
  twoWay: false
}

Почему не происходит повторное открытие - потому что вы внутри компонента меняете значение параметра, но снаружи оно не изменяется. То есть, с точки зрения родительского компонента, модальное окно так и осталось открытым. И когда вы повторно пытаетесь его открыть, свойство, отвечающее за состояние окна, не меняет своего значения, vue не видит никаких изменений, и, соответственно, ничего не делает.

В общем - разберитесь с используемой версией vue. И документацию почитайте - корень вашей проблемы в том, что вы пытаетесь использовать инструмент непредусмотренным способом.

UPD. В первую очередь вам следует переписать работу с параметром show - вместо присваивания значения напрямую, генерировать событие, на которое надо будет подписаться в родительском компоненте, и уже там изменять значение переменной, отвечающей за видимость окна (zoomModal, кажется). С чем конкретно стоит ознакомиться для понимания проблемы - раз, два.

text.match(/\[\[[^\]\]]*\]\]/g)

Замените replaceWith на html: $('.big-fig').html(content);.

Или, к чёрту jquery:

const image = document.querySelector('.big-img');
const text = document.querySelector('.big-fig');

document.querySelectorAll('.small-img').forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick() {
  image.src = this.src;
  text.innerHTML = this.closest('figure').querySelector('.small-fig').innerHTML;
}

Проблема в том, что второй компонент не выводит ни одного console.log().

Потому что ни одного console.log у вас там нет - есть console.debug.

Браузер у вас Chrome, да? - он по умолчанию debug не выводит. В консоли есть выпадающий список, где перечислены типы сообщений, которые надо выводить - Verbose, Info, Warnings, Errors - отметьте все. Ну или замените debug на log.

Как это сделали авторы jQuery - у них-то все работает?

Поднимаются по DOM-дереву от event.target до элемента, к которому подвешен обработчик, проверяют встреченные узлы на соответствие селектору. Интересуют подробности - откройте код jQuery, да посмотрите.

Вычисляемые имена свойств.

Этот метод стоит на событие onChange.

Сомнительное утверждение. "На событие" "стоит" не handleChange, а функция, которую он возвращает. По-видимому, необходимо единообразно обрабатывать события, возникающие в разных местах - единственные отличия, это имена обновляемых свойств, для каждого из которых создаётся собственный обработчик. Что, кстати, делать вовсе не обязательно - есть вариант прицепить значение type к элементу в виде data-атрибута, и тогда можно будет использовать общий обработчик:

handleChange = ({ target: { value, dataset: { type } } }) => {
  if (value.length <= limits.user.max) {
    this.setState({
      [type]: value,
    });
  }
}

<input onChange={this.handleChange} data-type="xxx">
<input onChange={this.handleChange} data-type="yyy">
<input onChange={this.handleChange} data-type="zzz">

Как это можно исправить?

Добавить exact - вижу, это вы и сами сообразили. Ещё можно изменить порядок роутов (рендерится первый подходящий):

<Switch>
  <Route exact path="/" component={HomePage} />
  <Route path="/:user/:commit" component={CommitPage} />
  <Route path="/:user" component={UserPage} />
</Switch>

Что стоит изучить, чтоб разобраться в вопросе?

Документацию.

<form>
  <div><input data-output="#output1"></div>
  <div><input data-output="#output2"></div>
  <div><textarea data-output="#output3"></textarea></div>
</form>

<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>

document.querySelector('form').addEventListener('input', e => {
  const output = document.querySelector(e.target.dataset.output);
  if (output) {
    output.innerHTML = e.target.value;
  }
});

или

<form>
  <div><input></div>
  <div><input></div>
  <div><textarea></textarea></div>
</form>

<div class="output"></div>
<div class="output"></div>
<div class="output"></div>

const input = [...document.querySelector('form').elements];
const output = document.querySelectorAll('.output');
const onInput = ({ target: t }) => output[input.indexOf(t)].innerText = t.value;
input.forEach(n => n.addEventListener('input', onInput));

Но как мне их передать в дочку на отображение ?

<SearchHub error={error} isLoaded={isLoaded} items={items} />

Сама "дочка" будет выглядеть несколько иначе, чем у вас есть сейчас, как-то так:

class SearchHub extends Component {
  render(){
    const { error, isLoaded, items } = this.props;

    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <Loader type="big" active> </Loader>;
    } else {
      return (
        <div className={styles.parent}>
          <div>
            {items.map(item => (
              <Gapped gap={20} key={item.name}>
                <span><b>{item.rating.totalLove}</b></span>
                <span><img src={shape} alt="heart"/></span>
                <span><img src={item.avatarUri} alt="avatar" className={styles.photo}/></span>
                <span>{item.name}<br/>{item.role}</span>
              </Gapped>
            ))}
          </div>
        </div>
      );
    }
  }
}

Ещё у вас косяк при получении данных - перед запросом надо бы выставлять isLoaded: false и сбрасывать значение error, а иначе не будет видно индикатора загрузки, и после первой же ошибки невозможно больше будет увидеть никаких данных.

renderCrypto(obj) {
  const percent = obj.percent_change_24h;
  const color = percent < 0 ? 'red' : 'rgb(2, 214, 19)';

  return (
    <div className='col-md-3'>
      <button type="button" className="btn btn-light">
        <a style={{ color }}>({ percent })%</a>
      </button>
    </div>
  );
}

Нужно просто на месте менять значение строки

Нужно? Невозможно. Строки в JS иммутабельны:

str = 'abc';
str[1] = '!';
console.log(str); // чё, ждали "a!c"? - а вот ни хрена, "abc"

Сделайте из объекта массив и сортируйте его как вам нужно:

const sortedData = Object
  .entries(data)
  .map(([ key, val ]) => ({ ...val, id: key }))
  .sort((a, b) => b.id - a.id);

Как сделать, чтоб метод из watch отрабатывал только при изменении полей пользователем?

Никак, watch отрабатывает при любых изменениях - в этом его смысл.

Вместо watch используйте обработчик события input.

if (this.articleArray.indexOf(data) === -1) {
  this.articleArray.push(data)

всё равно добавляется

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

if (!this.articleArray.some(n => n.id === data.id)) {
  ...

Если вдруг попытки добавить уже присутствующие в массиве элементы будут производиться часто, то, чтобы постоянно не бегать по массиву, можно сделать вычисляемое свойство, представляющее набор id содержащихся в массиве объектов и проверять, содержится ли в нём id проверяемого объекта (проверка наличия значения в наборе в среднем выполняется быстрее, чем поиск по массиву):

computed: {
  articleIds() {
    return new Set(this.articleArray.map(n => n.id));
  },
  ...

if (!this.articleIds.has(data.id)) {
  ...

Так?

fill="transparent" stroke="black"

А в чём проблема-то? Всё точно так же, как и с любыми другими параметрами. Например.

Делая по аналогии, я упираюсь в то, что нельзя обернуть router-view в transition-group, вылазит ошибка, что каждый блок должен иметь свойство :key.

Э-э-э, ну и что мешает задать этот key? Неважно какой, просто укажите его.

В качестве ширины флекс-контейнера (570px) задаю сумму ширин флекс-элементов (390px + 180px).

Если сумма ширин элементов равна ширине контейнера - о каком выравнивании может идти речь? Есть выравнивание, нет его - внешне разницы не будет.

Предположу, что вам надо на самом деле выравнять контейнер по центру страницы - добавьте margin: 0 auto элементу .subscribe-form, например.