0xD34F

<div @click="changeCategory(subcat)">
...
<div v-for="(v, k) in active">{{ k }}: {{ v }}</div>

changeCategory({ a, b }) {
  this.active = { a, b };
},

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

created() {
  this.changeCategory(this.categories[0].sub[0]);
},

Сделайте два разных (реально, конечно, это будет один и тот же) input'а, которые будут переключаться с помощью v-if/v-else - один для показа форматированного значения, другой для редактирования:

<input v-if="edit" v-model="price" @blur="edit = false">
<input v-else :value="formatPrice(price)" @focus="edit = true">

data: () => ({
  edit: false,
  price: 666,
}),
methods: {
  formatPrice: price => `${(+price).toLocaleString()} руб.`,
},

https://jsfiddle.net/j6tf20cg/

UPD. Можно и одним обойтись, но без v-model.

func(...$arr)

foreach ($arr as [ 'id_news' => $id ]) {
  $idsCount[$id] = ($idsCount[$id] ?? 0) + 1;
}

или

$idsCount = array_count_values(array_column($arr, 'id_news'));

\b\d+(?=[A-Z])

get searchtest() {
  const search = this.state.search.toLowerCase().trim();
  return search
    ? searchtest.filter(n => Object.values(n).some(m => m.toLowerCase().includes(search)))
    : searchtest;
}

UPD. Это ещё что за ерунда? Вот здесь:

{this.searchtest.map((kef, i, a) => (
  <div style={style}>
    <div key={kef.name} data-id={kef.name}>
      name: {kef.name}
    </div>
    <div key={kef.id} data-id={kef.id}>
      id: {kef.id}
    </div>
  </div>
))}

Ключи вместо вложенных элементов должны быть у их общего предка:

{this.searchtest.map(n => (
  <div key={n.id}>
    <div>name: {n.name}</div>
    <div>id: {n.id}</div>
  </div>
))}

.gallery__item:hover::before {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  background: transparent;
  z-index: 666;
}

В смысле, "буквы отдельно"?

Наверное, вы имели в виду обозначения молекул, состоящих из атомов только одного вещества.

\b[A-Z][a-z]?\d?\b

А почему строка? Могли бы и сами догадаться её в массив порезать:

const arr = str.split('-');
const end = 'final';

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

const obj = arr.reduceRight((acc, n) => ({ [n]: acc }), end);

Но, конечно, если очень хочется, то рекурсия возможна:

const obj = (function createObj(arr, i, end) {
  return i < arr.length
    ? { [arr[i]]: createObj(arr, i + 1, end) }
    : end;
})(arr, 0, end);

const result = graphData.map((n, i) => ({ ...n, color: palette[i % palette.length] }));

или, в более общем виде:

const combine = (arr, keys, values) =>
  arr.map(({ ...n }, i) => (
    values.forEach((m, j) => n[keys[j]] = m[i % m.length]),
    n
  ));


const result = combine(graphData, [ 'color' ], [ palette ]);

const replacements = [
  [ 'вот это надо заменить', 'вот на это' ],
  [ 'а это заменить', 'на вот это' ],
];

$elements.html((i, html) => {
  return replacements.reduce((acc, n) => acc.replace(RegExp(n[0], 'g'), n[1]), html);
});

str.replace(/\.? /g, '-')

нет

Делегирование, назначаем обработчик клика один раз:

// при клике по кнопке определяем её индекс и хватаем .photos__like-count с таким же индексом
document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('photos__like-icon')) {
    const index = [...document.querySelectorAll('.photos__like-icon')].indexOf(t);
    const counter = document.querySelectorAll('.photos__like-count')[index];
    const count = counter.textContent;
    counter.textContent = t.classList.toggle('active') ? -~count : ~-count;
  }
});

// но если у каждой пары icon-count если отдельный общий предок, то можно и попроще сделать
document.addEventListener('click', ({ target: t }) => {
  if (t.matches('.photos__like-icon')) {
    t
      .closest('селектор общего предка кнопки и элемента с количеством')
      .querySelector('.photos__like-count')
      .textContent -= t.classList.toggle('active') ? -1 : 1;
  }
});

Назначаем обработчик клика каждой кнопке индивидуально:

const toggleLike = function({ target: t }) {
  this[t.dataset.index].innerText -= [ 1, -1 ][+t.classList.toggle('active')];
}.bind(document.querySelectorAll('.photos__like-count'));

document.querySelectorAll('.photos__like-icon').forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', toggleLike);
});

// или, при наличии отдельных общих предков у каждой пары .photos__like-icon и .photos__like-count
const toggleLike = ({ target: t }) => t
  .closest('селектор общего предка кнопки и элемента с количеством')
  .querySelector('.photos__like-count')
  .innerText -= t.classList.toggle('active') ? -1 : 1;

for (const n of document.querySelectorAll('.photos__like-icon')) {
  n.addEventListener('click', toggleLike);
}

const Menu = ({ items }) =>
  items instanceof Array && items.length
    ? <ul>
        {items.map(n => (
          <li key={n.id}>
            <a>{n.title}</a>
            <Menu items={n.children} />
          </li>
        ))}
      </ul>
    : null;

Слушать событие mousemove, в зависимости от event.movementX задавать transform: translateX. Например.

$keys = [ 'Название', 'Цена', 'Количество' ];
$newArr = array_map(fn($n) => array_combine($keys, $n), $arr);

Сделайте packet свойством, а не методом.

^.+ [а-яА-Я]+$

function setAnimation(el) {
  $(el).css('animation', `shadow-pulse ${1 + Math.random() * 3}s`);
}

$('.mr-2').on('animationend', function() {
  $(this).css('animation', '');
  setTimeout(setAnimation, 0, this);
}).get().forEach(setAnimation);