0xD34F

Во-первых, nextStep.nextElementSibling - это никакой не блок аккордеона. Во-вторых, условие кривое - открываете блок, если он не следующий (!==) и закрыт, т.е., открываете все, кроме закрываемого.

document.addEventListener('click', e => {
  const t = e.target;
  const heading = t.closest('.panel-heading');
  const nextStep = t.closest('.construct-btn');
  const collapse = 
    heading  ? heading.nextElementSibling :
    nextStep ? t.closest('.panel').nextElementSibling.querySelector('.panel-collapse') :
               null;

  if (collapse) {
    e.preventDefault();
    t.closest('.panel-group').querySelectorAll('.panel-collapse').forEach(n => {
      n.classList[n === collapse ? 'toggle' : 'remove']('in');
    });
  }
});

вычисляемое свойство сделать, конечно же

Всё сохраняется. А почему вы этого не видите - потому что выводите дефолтное значение вместо сохранённого.

Добавим элементам products свойство, которое будет указывать, присутствует ли товар в корзине. Для этого перепишем его следующим образом:

computed: mapState({
  products: state => state.product.all.map(n => ({
    ...n,
    isOrdered: state.order.all.some(m => m.id === n.id),
  })),
}),

Всё, можно блокировать кнопку: <b-button :disabled="product.isOrdered".
И показывать уведомление о покупке: <div v-if="product.isOrdered".

Если же не хотите изменять уже существующее вычисляемое свойство, можно сделать ещё одно:

computed: {
  isOrdered() {
    return Object.fromEntries(this.$store.state.order.all.map(n => [ n.id, true ]));
  },
},

В шаблоне, вместо product.isOrdered из предыдущего варианта, будет isOrdered[product.id].

UPD. Вот вам демо. Код немного отличается от вашего и от того, что выше в ответе, плюс добавлен роутер, но, полагаю, разберётесь, что к чему.

У mapStateToProps есть второй аргумент - props компонента, доставайте id оттуда:

(state, ownProps) => {
  const { projectId } = ownProps.match.params;
  ...
}

Данные уносите в 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).

function diff(data1, data2, key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set(Array.from(data2, getKey));
  return Array.prototype.filter.call(data1, n => !keys.has(getKey(n)));
}

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

// есть и другие варианты применения
diff([ 1, 2, 3, 4, 5 ], [ 1, 2, 3 ]) // [4, 5]
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 не слышали?

$('.all-blocks.color-blocks .block').attr('id', function(i, id) {
  return $(this).hasClass(id) ? `${id}_2` : id;
});

или

document.querySelectorAll('.all-blocks.color-blocks .block').forEach(n => {
  n.id += n.classList.contains(n.id) ? '_2' : '';
});

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

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

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

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

jsfiddle.net/mjdkchzs