0xD34F

Ну а чтобы посчитать сумму, надо знать значения. То есть, значения надо не внутри компонента держать, а снаружи. И передавать внутрь вместе с функцией, которая будет их обновлять. Вот говнокод, например.

Как правило, все плагины работают от обратного - у них есть возможность передать массив только с неактивными датами.

Не все, бывают доступны оба варианта, гляньте vue-flatpickr-component, например - свойство config.enable.

А вообще, у приличного плагина должна быть возможность определять активность даты с помощью функции - на входе дата, на выходе true/false (это, значит, чтобы был вариант не перечислять конкретные даты, так как это может оказаться невыполнимым - типа все вторники и четверги, или все чётные числа). Т.е., вместо массива плагин будет принимать нечто вроде дата => массив.includes(дата.toLocaleDateString()):

Например, vue. Смотрите свойство disbaledDates.customPredictor.

Например, jquery. Смотрите свойство beforeShowDay.

$grouped = [];

foreach ($arr as $n) {
  $grouped[$n['category_id']][] = $n['text'];
}

foreach ($grouped as $key => $values) {
  echo "
    <fieldset>
      <legend>$key</legend>".
      implode('', array_map(fn($n) => "<div>$n</div>", $values))."
    </fieldset>";
}

const result = arr.filter(n => n.sessions.every(m => m.startDate !== sessionStartDate));

или

const result = [];

OUTER:
for (const n of arr) {
  for (const m of n.sessions) {
    if (m.startDate === sessionStartDate) {
      continue OUTER;
    }
  }

  result.push(n);
}

const result = arr.filter(n => arr2.includes(n.strategy));

или

const result = arr2.flatMap(function(n) {
  return this[n] ?? [];
}, arr.reduce((acc, n) => ((acc[n.strategy] ??= []).push(n), acc), {}));

или

const result = arr.filter(((values, n) => values.has(n.strategy)).bind(null, new Set(arr2)));

или

const result = [];

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

^(?=.*\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-атрибут кликнутого элемента, находим все элементы с таким же значением:

document.addEventListener('click', e => {
  const number = e.target.closest('[data-number]')?.dataset.number;
  if (number) {
    document.querySelectorAll(`[data-number="${number}"]`).forEach(n => n.remove());
  }
});

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

const lists = document.querySelectorAll('.list');
lists.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  const i = Array.prototype.indexOf.call(this.children, e.target.closest('li'));
  if (i !== -1) {
    lists.forEach(n => n.removeChild(n.children[i]));
  }
}

Экземпляр компонента, отображающего статьи, не создаётся заново при смене категории, поэтому хук 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 не забыли добавить?