0xD34F

Данные уносите в vuex, параметр роута пробрасываете в компонент, в компоненте делаете вычисляемое свойство, где по id будете доставать из хранилища нужный объект.

options: {
  hover: {
    mode: 'nearest',
  },
},

https://jsfiddle.net/zrwjbhfe/

Где ошибки?

В консоли.

Неужели было так сложно открыть её самостоятельно, увидеть там "ReferenceError: ReactDOM is not defined", и осознать, что react не подключен?

Затем, после подключения библиотеки, надо было бы обратить внимание на то, что заголовки вкладок не выделяются - селектор .active недостаточно специфичен. А ещё лучше - надо было сразу скопипастить оригинал как есть, а не пытаться вносить изменения, которых не понимаете.

Не то, чтобы прям ошибка, но индекс в качестве ключа - хуже чем ничего. Зачем его было добавлять? - в оригинале такого не было. Уберите или сделайте нормальные ключи.

document.querySelector('.add-sentence-btn').addEventListener('click', ({ target: t }) => {
  t.closest('.row').querySelectorAll('.hidden').forEach(n => n.classList.remove('hidden'));
  t.classList.add('hidden');
});

можно

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

UPD.

function addClickListeners(buttonsSelector, dialogSelector) {
  const buttons = document.querySelectorAll(buttonsSelector);
  const dialog = document.querySelector(dialogSelector);

  buttons.forEach(n => n.addEventListener('click', e => {
    e.preventDefault();
    dialog.style.display = 'block';
  }));

  dialog.addEventListener('click', ({ target }) => {
    if (target.classList.contains('popup-close')) {
      document.getElementById('name_1').disabled = true;
      document.getElementById('phone_1').disabled = true;
      dialog.style.display = 'none';
    } else if (!target.closest('.popup-content')) {
      dialog.style.display = 'none';
    }
  });
}


addClickListeners('header .contacts a', '.popup-call');
addClickListeners('.sentence-btn', '.popup-discount');
addClickListeners('.check-btn', '.popup-check');

document.addEventListener('click', function(e) {
  const heading = e.target.closest('.panel-heading');
  if (heading) {
    e.preventDefault();
    heading.closest('.panel-group').querySelectorAll('.panel-collapse').forEach(n => {
      n.classList[n === heading.nextElementSibling ? 'toggle' : 'remove']('in');
    });
  }
});

События не срабатывают. Никакие и никогда. Срабатывают обработчики событий.

по какой-то причине срабатывает только первый console.log()

Так, первый, отлично. А второй какой? Это который в componentWillUnmount? Ну так правильно не срабатывает. Когда компонент будет удаляться из DOM - тогда и сработает. Или вы ждёте, что повторно сработает первый? - если так, то это абсурд.

Всё работает так, как и должно. Вы сделайте вывод свойств width и height в render - увидите, что они изменяются при изменении размеров окна (или перенесите console.log в updateDimensions).

Делаем просто:

const result = array1.filter(n => !array2.some(m => m.name === n.name));

Делаем сложно:

function diff(data1, data2, key = n => n) {
  const result = [];
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set(Array.from(data2, getKey));

  for (const n of data1) {
    if (!keys.has(getKey(n))) {
      result.push(n);
    }
  }

  return result;
}

// ваш случай
const result = diff(array1, array2, 'name');

// есть и другие варианты применения
diff([ 1, 2, 3, 4, 5 ], [ 1, 2, 3 ]) // [4, 5]
diff(Array(10).keys(), Array(7).keys()) // [7, 8, 9]
diff('abcde', 'ACE', n => n.toLowerCase()) // ['b', 'd']

Научим компонент работать с директивой v-model.

Добавим параметр value - индекс item'а, который надо показать:

props: {
  value: Number,
  ...

computed: {
  item() {
    return this.items[this.value];
  },
  ...

<transition name="slide-fade" mode="out-in">
  <div class="content" :key="value">
    <h2>{{ item.title }}</h2>
    <p>{{ item.text }}</p>
  </div>
</transition>

Чтобы сменить отображаемый item, будем отправлять в родительский компонент новый индекс:

methods: {
  next(change) {
    const len = this.items.length;
    this.$emit('input', (this.value + change + len) % len);
  },
  ...

<button @click="next(-1)">Prev</button>
<button @click="next(+1)">Next</button>

Ну а в родителе останется связать какое-то из его свойств с экземпляром компонента слайдера:

data: () => ({
  active: 1,
  ...

<v-slider
  v-model="active"
  ...

https://jsfiddle.net/5runc0db/

document.querySelector('input').addEventListener('change', e => {
  const { files: [ file ] } = e.target;
  if (file) {
    const reader = new FileReader();
    reader.onload = e => document.querySelector('img').src = e.target.result;
    reader.readAsDataURL(file);
  }
});

Что, про clearInterval не слышали?

Кому и что надо добавить:

const selector = '.all-blocks.color-blocks .block';
const idSuffix = '_2';

Добавляем:

$(selector).attr('id', function(i, id) {
  return $(this).hasClass(id) ? id + idSuffix : id;
});

или

document.querySelectorAll(selector).forEach(n => {
  n.id += n.classList.contains(n.id) ? idSuffix : '';
});

Добавляем пунктам select'а атрибут, содержащий координаты города:

<option value="[55.751244,37.618423]">Москва</option>

При выборе пункта достаём значение, дёргаем setCenter:

select.addEventListener('change', function() {
  map.setCenter(JSON.parse(this.value));
});

jsfiddle.net/mjdkchzs

https://jsfiddle.net/Lvknuta1/

display: inline-block; или white-space: nowrap; для li

.active .block {
  border: 1px solid red;
  color: red;
}

.active .under-box-text {
  display: none;
}

.active .invisible {
  display: block;
}

const itemSelector = '.wrapper';
const buttonSelector = '.block, .link';
const activeClass = 'active';

$(itemSelector).on('click', buttonSelector, e => {
  $(e.delegateTarget).toggleClass(activeClass);
});

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.querySelectorAll(buttonSelector).forEach(m => m.addEventListener('click', this));
}, e => e.currentTarget.closest(itemSelector).classList.toggle(activeClass));

// или

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

function onClick(e) {
  const button = e.target.closest(buttonSelector);
  if (button) {
    this.classList.toggle(activeClass);
  }
}

// или

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  const item = button && button.closest(itemSelector);
  item && item.classList.toggle(activeClass);
});

{value >= 345 && value <= 500 ? <div>ничего нет</div> : null}

будет ещё больше таких промежутков

Ну тогда делаете массив объектов, которые будут содержать два свойства - массив промежутков (и отдельных значений, если надо) и текст, который надо вывести. И фильтруете его при рендеринге. Как-то так:

const messages = [
  {
    values: [ 1, 2, 4, 8, 16, 32, 64, 128, 256, 512 ],
    message: 'hello, world!!',
  },
  {
    values: [ [ 5, 15 ], [ 100, 200 ], 333, 444, 555 ],
    message: 'fuck the world',
  },
  {
    values: [ [ 50, 150 ], [ 250, 350 ], [ 666, 999 ] ],
    message: 'fuck everything',
  }
];

...

<div>
  {messages
    .filter(n => n.values.some(v => (
      (v instanceof Array && v[0] <= value && value <= v[1]) ||
      v === value
    )))
    .map(n => <div>{n.message}</div>)
  }
</div>

data: () => ({
  items: [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
  focused: null,
}),

<div v-for="(n, i) in items">
  <input @focus="focused = i" @blur="focused = null">
  <span v-show="focused === i" v-text="n"></span>
</div>

https://jsfiddle.net/5sxkjatg/

запрос_1()
  .then(результат_1 => Promise
    .all(результат_1.map(запрос_2))
    .then(результат_2 => результат_1.map((значение_1, i) => ({
      значение_1: значение_1,
      значение_2: результат_2[i],
    })))
  )
  .then(console.log)