0xD34F

const idsA = new Set(ListA.map(n => n.id));
const objB = Object.fromEntries(ListB.map(({ uid, ...n }) => [ uid, (n.id = uid, n) ]));
const ListAB = ListA.map(n => ({ ...n, ...objB[n.id] }));
ListB.forEach(({ uid }) => idsA.has(uid) || ListAB.push(objB[uid]));

или

const ListAB = [...ListB.reduce((acc, { uid: id, ...n }) => {
  Object.assign(acc.set(id, acc.get(id) || { id }).get(id), n);
  return acc;
}, new Map(ListA.map(n => [ n.id, {...n} ]))).values()];

Останавливайте всплытие при клике на инпут:

$list.find('input').click(e => e.stopPropagation());

Или проверяйте целевой элемент (это в обработчике клика по $listItems):

if (!$(e.target).is('input')) {
  $list.hide();
}

Вынесите её в thead.


UPD. Как это может выглядеть: thead, и дурацкий вариант.

str.match(/rgb\(.*\)/).pop().match(/\d+/g)

или

str.match(/rgb\((.*)\)/).pop().split(', ')

Замените

projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map((el) => el);

на

projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map(n => n.outerHTML).join('');

// или

technologyHandler(dataTechnologies).forEach(n => projectTechnologies.appendChild(n));

// или

for (const n of technologyHandler(dataTechnologies)) {
  projectTechnologies.insertAdjacentElement('beforeend', n);
}

// или

projectTechnologies.append(...technologyHandler(dataTechnologies));

ИЛИ

Перепишите technologyHandler следующим образом:

const technologyHandler = str => str
  .split(' ')
  .map(n => `<p class="project_technologies-item">${n}</p>`)
  .join('');

// или

const technologyHandler = str =>
  str.replace(/ ?(\S+)/g, '<p class="project_technologies-item">$1</p>');

И уберите map после её вызова:

projectTechnologies.innerHTML = technologyHandler(dataTechnologies);

Во-первых - погуглите, что такое всплытие событий.

Во-вторых - про модификаторы событий слышали? Надо бы self прикрутить - это если на "тень". Или stop - на окно.

:href="`https://oauth.vk.com/authorize?client_id=${client_id}`"

или

computed: {
  href() {
    return `https://oauth.vk.com/authorize?client_id=${this.client_id}`;
  },
},

:href="href"

или

methods: {
  href: client_id => `https://oauth.vk.com/authorize?client_id=${client_id}`,
},

:href="href(client_id)"

const digits = Object
  .entries([...`${num}`].reduce((acc, n) => (acc[n] = -~acc[n], acc), {}))
  .reduce((acc, n) => (~-n[1] && acc.push(+n[0]), acc), []);

или

const digits = (function get(num, count) {
  num && (count[num % 10]++, get(Math.floor(num / 10), count));
  return count;
})(num, Array(10).fill(0))
  .map((n, i) => n > 1 && i)
  .filter(n => n !== false);

или

const digits = Array
  .from(String(num), Number)
  .filter((n, i, a) => i !== a.indexOf(n))
  .filter((n, i, a) => i === a.indexOf(n));

или

const digits = (('' + num)
  .match(/\d/g)
  .sort()
  .join('')
  .match(/(\d)\1+/g) || [])
  .map(n => n[0] | 0);

Ловите событие change, обходите элементы, собирайте запрос. В чём проблема-то? Например.

Кого надо скрыть:

const values = [ 'text', 'move', 'lols' ];
const selector = values.map(n => `[data-cmd="${n}"]`).join(', ');
const elements = document.querySelectorAll(selector);

Как можно скрыть элемент:

const hide = el => el.style.display = 'none';
// или
const hide = el => el.style.setProperty('visibility', 'hidden');
// или
const hide = el => el.style.cssText += 'opacity: 0';
// или
const hide = el => el.setAttribute('style', 'transform: scale(0)');
// или
const hide = el => el.hidden = true;

Скрываем:

elements.forEach(hide);

// или

for (const n of elements) {
  hide(n);
}

// или

for (let i = 0; i < elements.length; i++) {
  hide(elements[i]);
}

// или

(function next(i, n = elements.item(i)) {
  n && (hide(n), next(-~i));
})(0);

$('.count').on('input', e => $('.game_iframe').width(e.target.value));

или

document.querySelector('.count').addEventListener('input', function() {
  document.querySelector('.game_iframe').style.width = `${this.value}px`;
});

да всё как обычно

если нужно несколько экземпляров, стилизованных единообразно, можно сделать компонент-обёртку

https://jsfiddle.net/cvr4mgnf/

Можно сделать фильтр, метод или вычисляемое свойство:

data: () => ({
  values: [ 0, 14235534, 53423, -9678953, 3451, 5323467445, -123456 ],
}),
filters: {
  format1: val => `${val}`.replace(/\d(?=(\d{3})+$)/g, '$& '),
},
methods: {
  format2: val => val.toLocaleString('ru-RU'),
},
computed: {
  formatted() {
    return this.values.map(n => {
      const sign = Math.sign(n) === -1;
      const arr = [...String(Math.abs(n))].reverse();
      return (sign ? '-' : '') + Array.from(
        { length: Math.ceil(arr.length / 3) },
        (n, i) => arr.slice(i * 3, (i + 1) * 3).reverse().join('')
      ).reverse().join(' ');
    });
  },
},

<div>
  <div v-for="n in values">{{ n | format1 }}</div>
</div>
<div>
  <div v-for="n in values">{{ format2(n) }}</div>
</div>
<pre>{{ formatted }}</pre>

https://jsfiddle.net/3qg792sr/

Делаете метод добавления маркеров, который перед добавлением будет удалять существующие маркеры. И ещё делаете watch на массив отфильтрованных данных, на основе которого маркеры создаются - там этот метод и вызываете. Например.

Или можно создать сразу все маркеры, в watcher'e обходить исходный массив данных, и помещать на карту/убирать с карты маркер в зависимости от того, присутствует ли текущее значение в отфильтрованном массиве - тоже вариант.

class App extends React.Component {
  state = {
    music: musicButton,
  }

  onClick = e => {
    if (this.audio) {
      this.audio.pause();
    }
    this.audio = new Audio(e.target.dataset.url);
    this.audio.play();
  }

  render() {
    return (
      <div>
        {this.state.music.map(n => (
          <button onClick={this.onClick} data-url={n.url} key={n.numButton}>{n.soundsName}</button>
        ))}
      </div>
    );
  }
}

Можно добавить ещё один data-атрибут - количество знаков после запятой (или без атрибута - вычисляйте, сколько знаков после запятой у data-numb). Там, где число должно быть целым - указываете 0. Ну и при выводе делаете toFixed, используя значение этого атрибута в качестве параметра. Как-то так (с атрибутом). Или так (и без).

Создаёте массив answers для хранения ответов. В зависимости от количества ожидаемых ответов (один или несколько) его элементы будут строками или массивами.

Связываете элементы answers с радиокнопками/чекбоксами вариантов ответов:

v-model="answers[questionIndex]"

Создаёте вычисляемое свойство, которое будет индикатором наличия ответа/ответов на текущий вопрос:

computed: {
  answerSelected() {
    return this.answers[this.questionIndex].length;
  },
},

И, наконец, используете это свойство для блокирования кнопки перехода к следующему вопросу:

:disabled="!answerSelected"

UPD. https://jsfiddle.net/20L61r85/

UPD. Вынесено из комментариев:

А можете подсказать, как в результат вывести не только отмеченные поля, но на какой вопрос были эти поля отмечены?

Можно в шаблоне добавить индекс при переборе ответов, по которому будем доставать вопрос. Или можно сделать ответ свойством вопроса - тогда при выводе результатов перебираем вопросы, и вся нужная информация доступна в одном месте.