0xD34F

computed: {
  objCopy() {
    return { ...this.obj };
  },
},
watch: {
  objCopy(newObj, oldObj) {
    for (const [ k, v ] of Object.entries(newObj)) {
      if (v !== oldObj[k]) {
        console.log(`obj.${k} changed from "${oldObj[k]}" to "${v}"`);
      }
    }
  },
},

Компонент получает через props массив текущих значений и максимально допустимую сумму. Когда пользователь пытается изменить какое-либо из значений, собирается новый массив значений, считается его сумма. Если сумма не превышает максимально допустимую - новый массив значений отдаётся в родительский компонент.

function Ranges(props) {
  const onChange = ({ target: t }) => {
    const index = +t.dataset.index;
    const value = +t.value;
    const values = props.values.map((n, i) => i === index ? value : n);

    if (props.max >= values.reduce((acc, n) => acc + n, 0)) {
      props.onChange(values);
    }
  };

  return (
    <div>
      {props.values.map((n, i) => (
        <div>
          <input
            type="range"
            data-index={i}
            max={props.max}
            value={n}
            onChange={onChange}
          />
          {n}
        </div>
      ))}
    </div>
  );
}

https://jsfiddle.net/cx16nhqe/

const groupedAndSortedArr = Object
  .values(arr.reduce((acc, n) => ((acc[n[0]] ??= []).push(n), acc), {}))
  .sort((a, b) => a[0][0].localeCompare(b[0][0]));

Не надо никаких регулярных выражений:

str.split('=').pop()
// или
str.slice(str.indexOf('=') + 1)

Но, конечно, можно и регулярками:

str.replace(/[^=]*=/, '')
// или
str.match(/(?<==).*/)[0]
// или
/[^=]*$/.exec(str).shift()

А вообще, учитывая, чем является эта строка, и что вы хотите из неё получить:

new URLSearchParams(str).get('sort')

$arr3 = array_filter($arr1, fn($n) => in_array($n, $arr2));

// или

$arr3 = array_intersect($arr1, $arr2);

добавить ? после +

const obj = [...str.matchAll(/([^?&]+)=([^&]+)/g)]
  .reduce((acc, [ , k, v ]) => (
    k.endsWith('[]')
      ? (acc[k.slice(0, -2)] ??= []).push(v)
      : acc[k] = v,
    acc
  ), {});

или

const params = new URLSearchParams(str);
const reg = /\[\]$/;
const obj = Object.fromEntries(Array.from(
  new Set(params.keys()),
  n => [
    n.replace(reg, ''),
    params[reg.test(n) ? 'getAll' : 'get'](n),
  ]
));

или

const obj = str.split('?').pop().split('&').reduce((acc, n) => {
  let [ k, v ] = n.split('=');
  const isArr = k.slice(-2) === '[]';
  k = k.substring(0, k.length - isArr * 2);
  const target = (isArr ? (acc[k] = acc[k] || []) : acc);
  target[isArr ? target.length : k] = v;
  return acc;
}, {});

<Swiper>
  {children.map(n => <SwiperSlide>{n}</SwiperSlide>)}
</Swiper>

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

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

Не все, бывают доступны оба варианта, гляньте 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 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 положить вообще не помогает

помогает

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

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