0xD34F

Элементы output - вместо id назначьте им класс.

document.addEventListener('change', function(e) {
  if (e.target.type === 'radio') {
    e.target.closest('form').querySelector('.output').textContent = e.target.value;
  }
});

const duplicates = Array
  .from(arr.reduce((acc, n) => acc.set(n.id, acc.has(n.id)), new Map))
  .reduce((acc, n) => (n[1] && acc.push(n[0]), acc), []);

// или

const duplicates = Object
  .entries(arr.reduce((acc, n) => (acc[n.id] = (acc[n.id] || 0) + 1, acc), {}))
  .filter(n => n[1] > 1)
  .map(n => +n[0]);

// или

const duplicates = [...arr
  .reduce((acc, n) => (acc[+acc[0].has(n.id)].add(n.id), acc), [ new Set, new Set ])
  .pop()
];

// или

const duplicates = arr
  .map(n => n.id)
  .filter((n, i, a) => i !== a.indexOf(n))
  .filter((n, i, a) => i === a.indexOf(n));

// или

const duplicates = arr.reduce((acc, { id: n }, i, a) => (
  !acc.includes(n) && i !== a.findIndex(m => m.id === n) && acc.push(n),
  acc
), []);

Элементам board.Stages добавляете булевы свойства show.

По клику переключаете их значения:

<ui-icon
  iconSet="ico-moon"
  data-icon="i-more"
  @click="stage.show = !stage.show"
>

Список показываете если true:

<div
  class="opportunity-board__list"
  v-show="stage.show"
>

А зачем + перед number? Может его стоит, ну не знаю, убрать?

А чо, сделать её параметром fetchSuccess'а - нет, никак?

s-switch(@switch="switch")

Круто. А вы в курсе, что switch - это ключевое слово? Переименуйте обработчик. Ну или пишите this.switch.

использовать слот

Вместо того, чтобы напрямую цеплять 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 - это мусор, их следует вырезать.