0xD34F

Доступен через cdn.

Берёте и подключаете.

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

data: () => ({
  status: '',
  ...

Получаете массив возможных (не считая дефолтного) значений выпадающего списка:

computed: {
  statuses() {
    return [...new Set(this.characters.map(n => n.status))];
  },
  ...

Сам список пусть создаётся так, например:

<select v-model="status">
  <option value="">&lt; ALL &gt;</option>
  <option v-for="n in statuses">{{ n }}</option>
</select>

Ну и фильтруете, наконец:

computed: {
  filteredCharacters() {
    const search = this.search.toLowerCase();
    const status = this.status;

    return this.characters.filter(n => (
      (!search || n.name.toLowerCase().includes(search)) &&
      (!status || status === n.status)
    ));
  },
  ...

Коротко:

const getRepetition = (arr, repeated) => Array
  .from(arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map))
  .reduce((acc, n) => (n[1] === repeated && acc.push(n[0]), acc), []);

Длинно:

function getRepetition(arr, repeated) {
  const result = [];
  const count = {};

  for (const n of arr) {
    if (!count.hasOwnProperty(n)) {
      count[n] = 0;
    }

    count[n]++;
  }

  for (const n in count) {
    if (count[n] === repeated) {
      result.push(+n);
    }
  }

  return result;
}

Не надо манипулировать маркерами напрямую. Храните в данных компонента индекс активного маркера, по событиям enter/leave устанавливайте его значение, в зависимости от которого передавайте в экземпляры компонента маркера картинки иконок:

data: () => ({
  map: {
    activeMarkerIndex: null,
    markerIconImages: [ MAP_MARKER_DEFAULT, MAP_MARKER_ACTIVE ],
    ...

<ymap-marker
  v-for="(n, i) in markers"
  :icon="{
    ...map.markerIcon,
    imageHref: map.markerIconImages[+(map.activeMarkerIndex === i)],
  }"
  @mouseenter="map.activeMarkerIndex = i"
  @mouseleave="map.activeMarkerIndex = null"
  ...

<li
  v-for="(n, i) in objects"
  @mouseenter="map.activeMarkerIndex = i"
  @mouseleave="map.activeMarkerIndex = null"
  ...

https://jsfiddle.net/bw5eym2n/

str.replace(/,(?=[^,]*$)/, ' and')

$(document).click('.e-1', function(event) {
console.log(event.target)
});

Вот бы узнать: первый параметр метода click, он тут по вашему мнению как используется? Мне кажется, вы не до конца понимаете, что написали.

Устанавливаем делегированный обработчик правильно, смотрим у объекта события свойство currentTarget:

$(document).on('click', '.e-1', function(e) {
  console.log(e.currentTarget);
});

Заменить :valid на :not(:placeholder-shown).

Самому элементу, соответственно, добавить непустой атрибут placeholder. Поскольку реально он не нужен, то пусть это будет пробел - чтобы было не видно.

updated() {
  this.$refs.scroll.addEventListener('wheel', this.fadeOut);
},

Это ещё что за убожество?
Откройте документацию vue, и разберитесь, как правильно подключать обработчики событий к элементам.

Когда условие в v-if ложно, элемента нет. Соответственно, в $refs.scroll вместо ссылки на несуществующий элемент пишется null, и вы пытаетесь обратиться к свойству этого null, чего делать не следует - у null никаких свойств нет и быть не может, подобные обращения заканчиваются ошибками вот как та, что получили вы.

const Format = (function createFormat(tags) {
  return new Proxy(
    (...content) => tags.reduceRight((acc, n) => `<${n}>${acc}</${n}>`, content.join('')),
    { get: (target, key) => createFormat([ ...tags, key ]) }
  );
})([]);

Открываем раздел документации, посвящённый реактивности, и читаем там, что

Отследить переназначение локальных переменных <...> не получится, такого механизма просто нет в JavaScript. Можно лишь отслеживать изменения свойств объектов.

Так что менять надо внутреннее содержимое, а не заменять объект на полностью новый. Вместо reactive следует использовать ref (соответственно, вместо copyDB = будет copyDB.value =), или же удалять существующие элементы массива, и добавлять новые:

copyDB.splice(0, copyDB.length, ...addFlags(props.items));

не передаются данные в router-link

А что за данные? Почему не показали (да и не только данные - ни строчки кода не вижу)? Случайно не объект запихнуть пытаетесь? - если так, то скорее всего всё передаётся, но данные превращаются в мусор. Дело в том, что роутер приводит значения параметров к строкам (кроме массивов - они-то останутся массивами, в строки будут превращены их элементы). Соответственно, если дальше вы из полученной строки или строк попытаетесь извлечь какие-то свойства (конечно из тех, что у строк нет), то получите undefined.

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

Что-то не понял, что конкретно вы пытаетесь сделать. Вижу два варианта, и оба бредовые.

1. Вы пытаетесь добавлять товар в корзину при переходе по ссылке. Если так - не надо никуда переходить, вместо router-link сделайте кнопку, по клику на которую сразу будет вызываться соответствующее действие или мутация.

2. Вы пытаетесь через router-link передать в компонент корзины массив добавленных в неё товаров. Если так - не надо ничего передавать, пусть компонент корзины забирает данные сразу из vuex.

Ожидается '*' в качестве результата, реально вы выдаёте '*\n'.

Лишний перенос строки в самом конце - тут лучше сделать массив, каждый элемент которого будет представлять отдельную строку результата, и склеить его в одну строку, типа .join('\n'). Ну и ещё пробелов не хватает после звёздочек.

Извлечение случайного элемента массива выносим в отдельную функцию:

const random = arr => arr[Math.random() * arr.length | 0];

Дальше можно получить случайный элемент случайного элемента:

const item = random(random(Object.values(state.themes)));

Или вложенный массив превратить в плоский и получить случайный элемент один раз:

const item = random(Object.values(state.themes).flat());

Какой из вариантов предпочесть? Зависит от того, как должны распределяться вероятности выпадения элементов - в случае, если выбирать элемент в два приёма, и размеры вложенных массивов различны, вероятности будут разными для разных массивов. Предположим, есть два вложенных массива, в одном два элемента, во втором сто. Получается, у элементов первого массива шанс быть выбранными один к четырём (один из двух массивов, один из двух элементов - 0.5 умножается на 0.5), а у элементов второго - один к двумстам (0.5 * 0.01).

То есть, если должны быть равны вероятности выпадения элементов - объединяем вложенные массивы в один. Если равными должны быть вероятности принадлежности выбранного элемента к вложенным массивам, то выбираем сначала массив, а потом элемент внутри него.

Но что если вероятности выпадения элементов должны быть равны, а размеры вложенных массивов велики, и не хотелось бы тратить на их объединение ни время, ни память? Возвращаемся к двум выборам, но выбирать вложенные массивы надо не с равными вероятностями, а учитывая их размеры:

function weightedRandom(arr, key = () => 1) {
  const val = key instanceof Function ? key : n => n[key];
  const max = arr.reduce((acc, n) => acc + val(n), 0);

  return () => {
    let rand = Math.random() * max;
    return arr.find(n => (rand -= val(n)) < 0);
  };
}

const randomArr = weightedRandom(Object.values(state.themes), 'length');

// ...

const item = random(randomArr());

<option v-for="item in info">
  {{ item.fieldTypes.geo }}
</option>

Это неправильно. Если значения в fieldTypes.geo не уникальны, option'ы тоже будут повторяться. Зачем это? Не надо. Делаем вычисляемое свойство, представляющее уникальные значение, и используем при создании option'ов его:

computed: {
  uniqueGeo() {
    return [...new Set(this.info.map(n => n.fieldTypes.geo))];
  },
  ...

<option v-for="n in uniqueGeo">{{ n }}</option>

В вычисляемом свойстве, которое представляет отфильтрованные данные, добавляем проверку второго значения, переписываем его следующим образом:

computed: {
  filteredOffers() {
    const vacancy = this.searchVacancyName.toUpperCase();
    const geo = this.searchGeo;

    return this.info.filter(n => (
      (!vacancy || n.fieldTypes.vacancyName.toUpperCase().includes(vacancy)) &&
      (!geo || n.fieldTypes.geo === geo)
    ));
  },
  ...

const elements = Array.prototype.filter.call(
  document.querySelectorAll('.green'),
  (n, i, a) => n.nextElementSibling !== a[i + 1]
);

Если отдельно стоящие элементы не интересуют, то замените селектор на '.green + .green', или при фильтрации дополнительно проверяйте, что n.previousElementSibling === a[i - 1].

str.split('/').pop()
// или
str.match(/[^\/]+$/)[0]
// или
str.replace(/.*\//, '')
// или
str.slice(str.lastIndexOf('/') + 1)
// или
Array.from(str).reduce((acc, n) => n === '/' ? '' : acc + n, '')
// или
[...str].filter((n, i, a) => !a.includes('/', i)).join('')

function Card(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

function App() {
  return (
    <div>
      <Card />
      <Card>
        <CircleTopik />
      </Card>
      <Card />
    </div>
  );
}

или

function Card({ showCircle }) {
  return (
    <div>
      {showCircle ? <CircleTopik /> : null}
    </div>
  );
}

function App() {
  return (
    <div>
      <Card />
      <Card showCircle />
      <Card />
    </div>
  );
}

Открываем документацию и видим, что

React.memo затрагивает только изменения пропсов. Если функциональный компонент обёрнут в React.memo и использует useState, useReducer или useContext, он будет повторно рендериться при изменении состояния или контекста.