0xD34F

Какое свойство проверяем: const key = 'strategy';.

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

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

или

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

или

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

или

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

или

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

^(?=.*\d).{1,10}$

Указали строго девять символов после восьмёрки - а в примере их всего семь. Указывайте переменное количество, минимум-максимум - вместо {9} пусть будет {4,9}, например. Или {6,9}. Или... Сами решайте, сколько их должно быть, вам виднее.

Кроме того, шестнадцатеричные числа - это не a-z, а a-f.

Одно значение (первое):

const val = arr.find(n => n.hasOwnProperty(key))?.[key];

Все, что есть:

const vals = arr.reduce((acc, n) => (n.hasOwnProperty(key) && acc.push(n[key]), acc), []);

Пробовал input в label положить вообще не помогает

помогает

Предлагаю погуглить, что такое асинхронность.

Сейчас у вас так: запросили данные, построили график, получили данные.

Добавьте в компонент слот:

<slot name="placeholder"></slot>

Соответственно, при использовании компонента можете что-то в этот слот передать:

<template #placeholder>
  <option value="" disabled>давай, выбирай</option>
</template>

https://jsfiddle.net/zc53rugL/

Где элементы находятся и о каком data-атрибуте идёт речь:

const container = document.body;
const key = 'number';
const attr = `data-${key}`;
const attrSelector = `[${attr}]`;

Вариант раз - обработчик клика вешаем на общего предка элементов; по клику ищем все элементы со значением атрибута как у кликнутого и удаляем их:

container.addEventListener('click', function(e) {
  const value = e.target.closest(attrSelector)?.dataset[key];
  if (value) {
    this.querySelectorAll(`[${attr}="${value}"]`).forEach(n => n.remove());
  }
});

Вариант два - заранее получаем массив всех элементов с атрибутом; обработчик клика цепляем непосредственно на элементы; при клике бежим по массиву, у кого значение атрибута совпало с кликнутым, тех удаляем (как со страницы, так и из массива):

const elems = [...container.querySelectorAll(attrSelector)];
const onClick = ({ currentTarget: { attributes: { [attr]: { value } } } }) =>
  elems.length -= elems.reduce((acc, n, i, a) => (
    a[i - acc] = n,
    acc + (n.getAttribute(attr) === value && !n.replaceWith())
  ), 0);

elems.forEach(n => n.addEventListener('click', onClick));

Экземпляр компонента, отображающего статьи, не создаётся заново при смене категории, поэтому хук mounted не вызывается. Соответственно, метод getArticles не вызывается тоже - вот статьи и не обновляются.

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

watch: {
  alias: {
    immediate: true,
    handler: 'getArticles',
  },
},

function haveSameValues(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }

  const count = new Map;
  arr1.forEach(n => count.set(n, -~count.get(n)));
  arr2.forEach(n => count.set(n, ~-count.get(n)));

  for (const n of count.values()) if (n) {
    return false;
  }

  return true;
}

haveSameValues(
  [ 'hello, world!!', 0, 0, 0, 1, 1, false, false ],
  [ false, false, 1, 1, 0, 0, 0, 'hello, world!!' ]
) // true

haveSameValues(
  [ 1, 2, 3 ],
  [ 3, 2, 2 ]
) // false

haveSameValues(
  [],
  []
) // true

str.gsub(/\w+/, '\'%\0%\'')

Выдёргиваем из элементов массив текстов, уникализируем его, собираем массив объектов:

const arr = Array.from(
  new Set(Array.from(document.querySelectorAll('.shop_name'), n => n.innerText)),
  n => ({ name: n })
);

Или, собираем объект, где ключами будут тексты элементов, а значениями объекты, затем выдёргиваем из полученного объекта массив значений:

const arr = Object.values(Array.prototype.reduce.call(
  document.getElementsByClassName('shop_name'),
  (acc, { textContent: name }) => (acc[name] ??= { name }, acc),
  {}
));

Можно директиву сделать:

function onClick({ currentTarget: t }) {
  const className = t.dataset.activeClass;
  document.querySelector(`.${className}`)?.classList.remove(className);
  t.classList.add(className);
}

Vue.directive('active-class', {
  bind(el, binding) {
    el.dataset.activeClass = binding.value;
    el.addEventListener('click', onClick);
  },
  update(el, binding) {
    el.dataset.activeClass = binding.value;
  },
  unbind(el) {
    delete el.dataset.activeClass;
    el.removeEventListener('click', onClick);
  },
});

<div v-active-class="'buy-voucher__amount_selected'">
<input v-active-class="'buy-voucher__amount_selected'">

Что значит "не обрабатывает"? Не рендерит? А есть где? Вложенный router-view не забыли добавить?

JS есть JS, всё как обычно:

- arr = [ 1, 2, 3, 4, 5, 6, 7, 8 ]

mixin xxx(arr, method, ...args)
   - newArr = arr[method](...args)
   p= newArr

+xxx(arr, 'slice', 2, 5)
+xxx(arr, 'filter', n => n & 1)

Правда, неясно, зачем вообще передавать имя метода и производить какие-то манипуляции внутри, если это можно делать снаружи:

- arr = [ 1, 2, 3, 4, 5, 6, 7, 8 ]

mixin xxx(arr)
  ul
    each n in arr
      li= n

+xxx(arr.slice(-3))
+xxx(arr.filter(n => !(n % 3)))

А может, всё-таки рендерится? Значение link не обновляется при изменении props.link, так что эффект не срабатывает - отсюда отсутствие внешних изменений при повторных рендерингах.

Уберите link, он вам тут не нужен, используйте в эффекте сразу props.link:

React.useEffect(() => {
  fetch(props.link)
    .then(r => r.json())
    .then(setItems);
}, [ props.link ]);

count = {}

for n in sum([ m[::2] for m in arr ], []):
  count[n] = count.get(n, 0) + 1

^\d{1,4}(\.\d{1,2})?([+-]\d{1,4}(\.\d{1,2})?){0,3}$