0xD34F

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. Вынесено из комментариев:

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

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

Если items это массив TCardItem, то и передавать в saveItem и addItem наверное надо TCardItem, а не object:

saveItem = (id: string, modifiedItem: TCardItem) => {

Кстати, а зачем в saveItem отдельно передавать id? - он же должен быть в modifiedItem.

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

function randomArr(size, min, max) {
  const arr = Array.from({ length: max - min + 1 }, (n, i) => i + min);

  for (let i = arr.length; --i > 0;) {
    const j = Math.random() * (i + 1) | 0;
    [ arr[j], arr[i] ] = [ arr[i], arr[j] ];
  }

  return arr.slice(0, size);
}


const arr = randomArr(4, 1, 9);

const containerSelector = '.dog';
const buttonSelector = 'i.fa-dog';
const counterSelector = '.score_counter';

Если пара кнопка-счётчик представлена в единственном экземпляре:

$(buttonSelector).click(() => {
  $(counterSelector).text((i, val) => +val + 1);
});

// или

document.querySelector(buttonSelector).addEventListener('click', () => {
  document.querySelector(counterSelector).textContent -= -1;
});

Если элементов .dog несколько:

$(containerSelector).on('click', buttonSelector, e => {
  $(counterSelector, e.delegateTarget).text((i, val) => -~val);
});

// или

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, ({ currentTarget: t }) => t
  .closest(containerSelector)
  .querySelector(counterSelector)
  .innerText++
);

overflow-y

Заворачиваем код в $('.calculator').each, вместо поиска элементов по всему документу ограничиваемся текущим .calculator. Как-то так.

const $thumbs = $('.thumbs');

$('.show-image').click(function(e) {
  e.preventDefault();
  $('.images img.active').removeClass('active');
  $('.images img').eq(this.dataset.index).addClass('active');
}).attr('data-index', i => i);

$('.next').click(() => $thumbs.append($thumbs.find('.show-image').first()));
$('.prev').click(() => $thumbs.prepend($thumbs.find('.show-image').last()));

const vowelCount = str => str.replace(/[^aeiouy]/gi, '').length;

или

const vowelCount = str => ~-str.split(/[aeiouy]/i).length;

или

const vowelCount = str =>
  Array.prototype.reduce.call(
    str.toLowerCase(),
    (acc, n) => acc + 'aeiouy'.includes(n),
    0
  );

Не вижу router-view. Где он? Должен быть. Надо добавить.

UPD. Глянул остальной код - дичь какая-то.

Должен ли пользователь одновременно видеть компоненты Pagination и Detail? Чё-то сомнительно. Наверное, стоит сделать для pagination отдельный роут, который будет доступен по дефолту (?). А если какая-то его часть (.header?) должна быть доступна везде - её можно вынести в компонент App (в котором следует разместить router-view).

Компонент Pagination. Почему при создании router-link вы в качестве id используете индекс? Вместо

<router-link :to="{ name: 'detail', params: {id: index} }">

должно быть

<router-link :to="{ name: 'detail', params: { id: post.id } }">

Компонент Detail. В шаблоне используется свойство detail, которого нет. Очевидно, опечатка - вместо него должно было использоваться свойство post. Которое, кстати, ни разу не реактивное, создаётся в created. Ну а массив posts - он как изначально был пустым, так таким навсегда и останется, вы его никак не изменяете (да и вообще непонятно, зачем он здесь нужен), так что никаких данных у вас в detail не будет никогда. Наверное, стоит добавить наблюдателя за $route.params.id, в котором выполнять запрос на получение данных поста. Выглядеть это может как-то так:

data: () => ({
  post: null,
}),
watch: {
  '$route.params.id': {
    immediate: true,
    handler(id) {
      axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`).then(r => this.post = r.data);
    },
  },
},

<button>toggle disabled</button>
<select>
  <option value="">выбрать</option>
  <option value="69">hello, world!!</option>
  <option value="187">fuck the world</option>
  <option value="666">fuck everything</option>
</select>

const $select = $('select');

$('button').click(function() {
  $select
    .prop('disabled', (i, val) => !val)
    .val('')
    .find('[value=""]')
    .text(() => $select.prop('disabled') ? 'тут ничего нет' : 'выбрать');
});

// или

const select = document.querySelector('select');

document.querySelector('button').addEventListener('click', () => {
  select.disabled = !select.disabled;
  select.value = '';
  select[0].textContent = select.disabled ? 'тут ничего нет' : 'выбрать';
});

Вешаете на прокручиваемый элемент обработчик соответствующего события:

@scroll="onScroll"

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

methods: {
  onScroll(e) {
    if (e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight) {
      // ...
    }
  },

Если осуществлять "подгрузку" надо не строго по достижении нижней границы контейнера, а начиная с некоторого расстояния до неё, тогда в неравенстве выше просто вычтите из правой части нужное количество пикселей (e.target.scrollHeight - расстояниеДоНижнейГраницы).

https://jsfiddle.net/ht9q5c7g/

Как получить элементы:

const elems = document.querySelectorAll('.hint');
// или
const elems = document.getElementsByClassName('hint');

Как получить текст элемента:

const getText = el => el.innerText;
// или
const getText = el => el.textContent;
// или
const getText = el => el.firstChild.nodeValue;

Как собрать массив текстов:

const hints = Array.from(elems, getText);

// или

const hints = Array.prototype.map.call(elems, getText);

// или

const hints = [];
for (const n of elems) {
  hints.push(getText(n));
}

// или

const hints = [];
for (let i = 0; i < elems.length; i++) {
  hints[i] = getText(elems[i]);
}

const filterSelector = '.s-mobile-filter-type-select';
const selectSelector = '.s-mobile-filter-type-select__select';
const selectedSelector = '.s-mobile-filter-type-select__selected-options-list-content';

Вот jquery:

$(selectSelector).on('change', function() {
  $(this)
    .closest(filterSelector)
    .find(selectedSelector)
    .text($('option:selected', this).get().map(n => $(n).text()).join(', '));
});

А вот jquery катится к чёрту:

const updateSelected = select => select
  .closest(filterSelector)
  .querySelector(selectedSelector)
  .textContent = Array
    .from(select.selectedOptions, n => n.text)
    .join(', ');


// можно назначить обработчик события каждому select'у индивидуально
document.querySelectorAll(selectSelector).forEach(function(n) {
  n.addEventListener('change', this);
}, e => updateSelected(e.target));

// или, применяем делегирование
document.addEventListener('change', ({ target: t }) => {
  if (t.matches(selectSelector)) {
    updateSelected(t);
  }
});

const uniqueWithSum = (arr, idKey, sumKey) =>
  Object.values(arr.reduce((acc, n) => {
    const id = n[idKey];
    acc[id] = acc[id] || Object.assign(new n.constructor, n, { [sumKey]: 0 });
    acc[id][sumKey] += n[sumKey];
    return acc;
  }, {}));

// ваш случай
const result = uniqueWithSum(arr, 'id', 'duration');

// элементам не обязательно быть объектами, это могут быть и массивы
uniqueWithSum([
  [ 'A', 1 ],
  [ 'B', 5 ],
  [ 'A', 2 ],
  [ 'A', 3 ],
], 0, 1) // [ [ 'A', 6 ], [ 'B', 5 ] ]