0xD34F

Оберните каждый из элементов .reviews__item в дополнительный div.

list(zip(a, b, c))

Какое свойство смотрим, какие значения хотим увидеть:

const key = 'workplace';
const values = [ 'office', 'hotel' ];

Достаём объекты:

const result = arr.filter(function(n) {
  return this.has(n[key]);
}, new Set(values));

// или

const result = values.flatMap(((grouped, n) => grouped[n] ?? []).bind(
  null,
  arr.reduce((acc, n) => ((acc[n[key]] = acc[n[key]] ?? []).push(n), acc), {})
));

// или

const result = [];
for (const n of arr) {
  for (const m of values) {
    if (m === n[key]) {
      result.push(n);
      break;
    }
  }
}

// или

const result = [];
for (let i = 0; i < arr.length; i++) {
  if (~values.indexOf(arr[i][key])) {
    result[result.length] = arr[i];
  }
}

// или

const result = (function get(i, n = arr[i]) {
  return n
    ? [].concat(values.includes(n[key]) ? n : [], get(-~i))
    : [];
})(0);

replacements = {
  'Black' => 'African American',
  'AI/AN**' => 'American Indian or Alaskan Native',
  'NH/PI**' => 'Native Hawaiian or Other Pacific Islander'
}

replaced = arr.map{|n| replacements[n] or n}

search = [ 'White', 'Black', 'Asian', 'Hispanic' ]

max = arr
  .select{|n| search.include?(n['description'])}
  .max_by{|n| n['count']}

Продублированы данные - зачем? Пусть результат поиска будет изначально пуст, выполняйте поиск после создания экземпляра компонента. Чтобы не пришлось дублировать код поиска, разделите метод на два: один обновляет значения для поиска, другой выполняет собственно поиск и вызывается в двух местах - в componendDidMount и после обновления объекта значений для поиска.

Стейт обновляется асинхронно, так что сразу после вызова setState вы не увидите в стейте только что обновлённое значение и будете выполнять поиск по старому. Вторым параметром в setState можно передать функцию, которая будет выполнена после обновления стейта - передавайте метод поиска. Или же, в componentDidUpdate проверяйте, что текущий объект поиска не равен предыдущему и в этом случае вызывайте метод поиска.

Конвертация в json - зачем?

Почему любая успешная проверка приводит к помещению элемента данных в массив результатов поиска? Так результаты будут дублироваться - скольким значениям из объекта поиска соответствует элемент данных, столько раз он будет помещён в массив результатов. Надо убедиться, что элемент данных соответствует всем значениям из объекта поиска, и только после этого помещать его в массив результатов.

Значение общего поиска должно обрабатываться в особом порядке - надо проверять его соответствие любому из свойств элемента данных.

https://jsfiddle.net/vLk97n6y/1/

document.addEventListener('click', () => {
  console.log(performance.now());
}, { once: true });

или

const t = new Date;
document.addEventListener('click', function onClick() {
  console.log(new Date - t);
  document.removeEventListener('click', onClick);
});

array_splice

Замените

<div>
  <span>{{ item.questions[index]['description'] }}</span>
  <span v-if="item.questions[index]['answer'] == 2">Да</span>
  <span v-if="item.questions[index]['answer'] == 1">Нет</span>
</div>

на

<div v-for="n in item.questions">
  <span>{{ n.description }}</span>
  <span>{{ n.answer | answer }}</span>
</div>

filters: {
  answer: val => [ 'Нет', 'Да' ][val - 1],
  ...

При каждом добавлении нового элемента в #list-case вы назначаете обработчики клика всем существующим .img и .show, а не только свежесозданным. Если срабатывает два (или четыре, или шесть, или...) обработчика, которые выполняют toggleClass, то конечное состояние от начального отличаться не будет. Отсюда ваше кажущееся "не работает".

Не надо назначать никаких обработчиков при добавлении .case, делайте это один раз, используя делегирование:

$('#list-case')
  .on('click', '.img', function() {
    $(this).closest('.case').remove();
  })
  .on('click', '.show', function() {
    $(this).toggleClass('none').closest('.case').find('.case-bottom').toggleClass('invise');
  });

Возможные значения плейсхолдера, с какой задержкой и кому их надо назначать:

const placeholders = [ 'hello, world!!', 'fuck the world', 'fuck everything' ];
const delay = 200;
const input = document.querySelector('input');

Назначаем:

function interval(arr, delay, callback) {
  let i = -1;

  return arr.length
    ? setInterval(() => callback(arr[i = -~i % arr.length]), delay)
    : null;
}


const intervalId = interval(placeholders, delay, n => input.placeholder = n);
// хотим остановить, делаем так: clearInterval(intervalId);

или

function interval(arr, delay, callback) {
  let timeoutId = null;

  arr.length && (function next(i) {
    timeoutId = setTimeout(() => {
      callback(arr[i]);
      next((i + 1) % arr.length);
    }, delay);
  })(0);

  return () => clearTimeout(timeoutId);
}


const stop = interval(
  placeholders,
  delay,
  Element.prototype.setAttribute.bind(input, 'placeholder')
);
// хотим остановить, делаем так: stop();

Ерунду какую-то написали в render. Делайте так:

render: val => val
  ? <Tag color="success">Активен</Tag>
  : <Tag color="default">Не активен</Tag>

Потому что

return false;

Возврат false из обработчика события, устанавливаемого посредством jquery, приводит к отмене действия по умолчанию. В данном случае - клика по input'у.

toggle дважды начинает срабатывать

Потому что клик по label'у вызывает клик по input'у, это событие всплывает, и обработчик, привязанный к label'у, срабатывает повторно.

Вешайте обработчик на input вместо label и слушайте change вместо click.

str.trim().split(/\s+/)

или

str.match(/\S+/g) ?? []

const comparators = [
  [ 'city', (itemVal, filterVal) => itemVal === filterVal ],
  [ 'title', (itemVal, filterVal) => itemVal.includes(filterVal) ],
  [ 'type', (itemVal, filterVal) => itemVal.includes(filterVal) ],
];


const filteredArr = arr.filter(n => comparators.every(([ k, f ]) => f(n[k], filter[k])));

.active {
  background: red;
}

data: () => ({
  val: -Infinity,
  ...
}),
methods: {
  onClick() {
    this.val = Math.min(...this.arr.filter(n => n > this.val));
  },
  ...
},

<div v-for="n in arr" :class="{ active: n <= val }">{{ n }}</div>
<button @click="onClick">click me</button>

document.querySelectorAll('.group-options__item').forEach(n => {
  const input = (n.closest('.group-options') ?? n).querySelector('[data-prop]');
  if (input) {
    input.checked = true;
  }
});