0xD34F

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

model: {
  prop: 'checked',
},
props: {
  value: [ String, Number ],
  checked: [ Boolean, Array ],
  label: String,
  disabled: Boolean,
},
computed: {
  model: {
    get() {
      return this.checked;
    },
    set(val) {
      this.$emit('input', val);
    },
  },
},

<label>
  <input
    type="checkbox"
    v-model="model"
    :value="value"
    :disabled="disabled"
  />
  {{ label }}
</label>

https://jsfiddle.net/bj7qwyas/

Пытаетесь управлять состоянием нескольких элементов одной булевой переменной. Так не получится, пусть это будет массив булевых значений - меняем animated: false на animated: Array(6).fill(false).

Этот же массив используем для создания элементов:

<div
  v-for="n in animated"
  :class="{ animated: n }"
  ...

Получать элементы посредством querySelector не следует - для этого есть ref.

Ну а дальше всё просто - обходим элементы и цепляем к ним Waypoint:

this.$refs.animate.forEach((n, i) => new Waypoint.Inview({
  element: n,
  entered: () => this.$set(this.animated, i, true),
  exited: () => this.$set(this.animated, i, false),
}));

https://jsfiddle.net/fsL9auht/

массив с данными для форм, v-for, push

.dropdown
    &__button:hover + &__content,
    &__content:hover
        display: block

Неужели так трудно документацию было открыть? Так же всё написано.

$('.slider').slider('values', [ thisfrom, thisto ]);

UPD. Если одновременно выбраны "от 3 до 7" и "от 15 до 50", например - отобразить подобное не выйдет, интервал не должен иметь разрывов. Очевидно, вместо чекбоксов должны быть радиокнопки.

UPD. https://jsfiddle.net/mzqcLn8a/

Складываете цвета в массив:

const colors = [ 'red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'magenta' ];

Объявляете переменную - индекс текущего цвета:

let index = -1;

По событию mouseenter делаете индексу + 1 и меняете цвет background'а:

hoverEl.addEventListener('mouseenter', () => {
  index = (index + 1) % colors.length;
  colorEl.style.backgroundColor = colors[index];
});

https://jsfiddle.net/3gh7t2jz/

const results = await Promise.all(gid.map(id => parseID(id)));

const data = Array
  .from(document.querySelectorAll('.js-input input'))
  .reduce((acc, n) => {
    const keys = n.name.match(/(?<=\[)\w+(?=\])/g);
    const key = keys.pop();
    keys.reduce((p, c) => p[c] = p[c] || {}, acc)[key] = n.value;
    return acc;
  }, {});

При моей структуре достать его через css не получится наверное? (да/нет?)

получится, если разместить input'ы перед label'ами

Элементы games должны иметь уникальное свойство, которое бы позволяло их идентифицировать, id. Если такого нет - срочно добавляйте. Сохранять в localStorage следует эти id. Так что добавим в стейт соответствующий массив:

state: {
  wishlistIds: [],
  ...

И укажем его в настройках persistedstate (да, можно сохранять не весь стейт, а только некоторые элементы):

plugins: [
  createPersistedState({
    paths: [ 'wishlistIds' ],
  }),
  ...

Массив wishlist - из стейта переносим в геттеры:

getters: {
  wishlist: state => state.games.filter(n => state.wishlistIds.includes(n.id)),
  ...

Добавление/удаление, соответственно:

mutations: {
  addGame(state, gameId) {
    if (!state.wishlistIds.includes(gameId)) {
      state.wishlistIds.push(gameId);
    }
  },
  removeGame(state, gameId) {
    const index = state.wishlistIds.indexOf(gameId);
    if (index !== -1) {
      state.wishlistIds.splice(index, 1);
    }
  },
  ...

В компонент, отображающий элементы games, добавим вычисляемое свойство liked, которое будет указывать, находится ли текущий элемент в wishlist и управлять добавлением/удалением:

computed: {
  liked: {
    get() {
      return this.$store.state.wishlistIds.includes(this.game.id);
    },
    set(val) {
      this.$store.commit(val ? 'addGame' : 'removeGame', this.game.id);
    },
  },
  ...

<button @click="liked = !liked" :class="{ liked }" class="like"></button>

Ну а свойство isLiked и метод putLike - это мусор, их следует вырезать.

Это просто компонент, рисующий график, доступа к chartist API он не предоставляет. Так что надо импортировать chartist отдельно:

import chartist from 'chartist';

Соответственно, вместо

VueChartist.Interpolation.simple()

будет

chartist.Interpolation.simple()

https://codesandbox.io/s/vue-template-uh9j2

str.gsub(/\b(\w+) \1/i, '\1')

https://jsfiddle.net/gxab98nq/

т.к. объектов много (~2000) при очистке фильтра страница подлагивает

Пагинацию сделайте - вместо двух тысяч будет отображаться одновременно несколько десятков.

Да и вообще, заставлять пользователей созерцать тысячи объектов, вне зависимости от скорости отрисовки - само по себе неправильно. Не может человек столько информации воспринять за один раз.

const videos = document.querySelectorAll('video');
const onPlay = e => videos.forEach(n => n !== e.target && n.pause());
videos.forEach(n => n.addEventListener('play', onPlay));

const $elements = $('здесь селектор ваших элементов');
const updateElement = i => $elements.eq(i).addClass('здесь ваш класс');
const delay = 500;

Можно сразу назначить таймауты для каждого из элементов, с временем задержки, зависящим от индекса элемента:

$elements.each(i => setTimeout(updateElement, (i + 1) * delay, i));

Или время задержки у всех одинаковое, таймауты назначаются поочерёдно - следующий запускается из коллбека предыдущего:

(function next(i) {
  if (i < $elements.length) {
    setTimeout(() => {
      updateElement(i);
      next(-~i);
    }, delay);
  }
})(0);

Или, вместо таймаутов используется интервал:

const intervalID = setInterval(
  i => updateElement(++i[0]).length || clearInterval(intervalID),
  delay,
  [ -1 ]
);

каждый пункт из этого списка должен выводиться на конкретной странице, например, в виде заголовка

Раскидайте элементы списка по метаданным маршрутов, и

<h1>{{ $route.meta.title }}</h1>

Функция array_map умеет работать более чем с одним массивом:

echo implode('<br>', array_map(function($n, $i) use(&$result) {
  return
    "Книгу ".$result['BOOKS'][$i]['bookName'].
    " написали для машины ".$n['name']." в ".$n['year'].
    " году, можно заказать по электронной почте ".$result['BOOKS'][$i]['authorEmail'];
}, $result['CARS'], array_keys($result['BOOKS'])));