0xD34F

const findPath = (arr, id) =>
  (Array.isArray(arr) ? arr : []).reduce((found, n) => {
    if (!found) {
      found = n.category.categoryId === id
        ? []
        : findPath(n.children, id);

      if (found) {
        found.unshift(n.category);
      }
    }

    return found;
  }, null);

[...str].reduce((acc, n) => acc + !~-n, 0)

// или

str.match(/1/g)?.length ?? 0

// или

str.split('').filter(n => n === '1').length

// или

str.replace(/[^1]/g, '').length

// или

eval(Array.from(str, n => +(n == 1)).join('+')) || 0

Лучше никак. Измените api так, чтобы получать json вместо html, и создавайте разметку из данных средствами vue.

Ну а так-то можно делегированием воспользоваться:

<div v-html="свойствоСодержащееHTML" @click="onClick">

methods: {
  onClick(e) {
    if (e.target.tagName === 'BUTTON') {
      const id = e.target.closest('.product').dataset.id;
      ...
    }
  },
  ...
},

https://jsfiddle.net/grfo05vm/

ids = set(n['id'] for n in arr)
grouped = [ (i, [ n['qty'] for n in arr if n['id'] == i ]) for i in ids ]
summed = [ { 'id': k, 'qty': sum(v), 'id_count': len(v) } for k, v in grouped ]

const parseValue = str => {
  const values = str.match(/[^\s,]+/g) || [ null ];
  return values.length > 1 ? values : values[0];
};

const parseStyleStr = str =>
  str.split(';').reduce((acc, n) => {
    const [ k, v ] = n.split(':').map(n => n.trim());
    if (k && v) {
      const f = [...v.matchAll(/([\w]+?)\((.+?)\)/g)];
      acc[k] = f.length
        ? Object.fromEntries(f.map(n => [ n[1], parseValue(n[2]) ]))
        : parseValue(v);
    }

    return acc;
  }, {});

Хорошо бы если на чистом css

Придётся сильно поменять разметку. Управлять видимостью вкладок можно с помощью скрытых радиокнопок.

но и js тоже можно

document.addEventListener('click', ({ target: { tagName, parentNode: p } }) => {
  if (tagName === 'SUMMARY') {
    document.querySelectorAll('details').forEach(n => n.open = n.open && n === p);
  }
});

// или

const details = document.querySelectorAll('details');
const onClick = e => details.forEach(n => n.open = n.open && n === e.target.parentNode);
details.forEach(n => n.children[0].addEventListener('click', onClick));

Всё правильно, не работает. Потому что нечему работать - vue-the-mask отсутствует. Надо подключить.

const obj = arr.find(n => n.id === newObj.id);
if (obj) {
  obj.counter++;
} else {
  arr.push({ ...newObj, counter: 1 });
}

Если отвечать ровно на то, что было спрошено - замените on на one. Но что если запрос окажется неудачным? Наверное, надо оставить пользователю возможность повторить действие. Вон, у вас там класс добавляется - так проверяйте его наличие, если уже есть, ничего делать не надо; также добавьте обработку неудавшихся запросов, там надо будет класс снять.

Запускайте наблюдение после получения данных:

async created() {
  await this.getAsyncData();
  this.$watch('some_value', value => {
    ...
  });
},

Object.values(arr1.reduce((acc, { user_id: id, ...n }) => {
  Object.entries(n).forEach(([ k, v ]) => acc[id][k] = (acc[id][k] || 0) + v);
  return acc;
}, Object.fromEntries(arr2.map(n => [ n.id, {...n} ]))))

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

[...arr1.reduce((acc, { user_id: id, ...n }) => {
  const obj = acc.get(id);
  Object.entries(n).forEach(([ k, v ]) => obj[k] = (obj[k] || 0) + v);
  return acc;
}, new Map(arr2.map(n => [ n.id, {...n} ]))).values()]

или, вместо Object.values извлекаем данные из объекта через map по исходному массиву:

arr2.map(function(n) {
  return this[n.id];
}, arr1.reduce((acc, { user_id: id, ...n }) => (
  Object.keys(n).forEach(k => acc[id][k] = (acc[id][k] || 0) + n[k]),
  acc
), Object.fromEntries(arr2.map(n => [ n.id, {...n} ]))))

Вспомогательная функция, очень нужна, не спрашивайте зачем:

const getReversedPaths = (arr, path = []) =>
  arr.reduce((acc, { childItems, ...item }) => {
    path.push(item);

    if (childItems) {
      acc.push(...getReversedPaths(childItems, path));
    } else {
      acc.push(path.length > 1
        ? path.map(({ packingLevel }, i, a) => ({ ...a[a.length - i - 1], packingLevel }))
        : [ path[0] ]
      );
    }

    path.pop();

    return acc;
  }, []);

Туда:

const reverseThere = arr =>
  getReversedPaths(arr).map(n =>
    n.reduceRight((child, parent) => ({ ...parent, childItems: [ child ] }))
  );

Обратно:

const reverseBackAgain = arr =>
  (function createTree(arr) {
    return Object.values(arr.reduce((acc, [ head, ...tail ]) => {
      if (tail.length) {
        (acc[head.name] = acc[head.name] || { ...head, childItems: [] }).childItems.push(tail);
      } else {
        acc[head.name] = head;
      }

      return acc;
    }, {})).map(n => (n.childItems && (n.childItems = createTree(n.childItems)), n));
  })(getReversedPaths(arr));

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

В родительском компоненте:

<Child onChange={onChange} />

В дочернем:

useEffect(() => props.onChange(val), [ val ]);

https://jsfiddle.net/su2az6of/

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

https://jsfiddle.net/su2az6of/1/

Создать новый массив:

const newArr2 = arr2.filter(n => arr1.includes(n.name));

// или

const newArr2 = arr2.filter(function(n) {
  return this.has(n.name);
}, new Set(arr1));

// или

const obj2 = Object.fromEntries(arr2.map(n => [ n.name, n ]));
const newArr2 = arr1.reduce((acc, n) => ((n = obj2[n]) && acc.push(n), acc), []);

Удалить элементы существующего:

let numDeleted = 0;

for (let i = 0; i < arr2.length; i++) {
  arr2[i - numDeleted] = arr2[i];
  numDeleted += !arr1.includes(arr2[i].name);
}

arr2.length -= numDeleted;

// или

for (let i = arr2.length; i--;) {
  if (!arr1.includes(arr2[i].name)) {
    arr2.splice(i, 1);
  }
}

// или

arr2.reduceRight((_, n, i, a) => arr1.includes(n.name) || a.splice(i, 1), null);

// или

arr2.splice(0, arr2.length, ...arr2.filter(n => arr1.includes(n.name)));

Добавьте в начало скрытый option:

<select>
  <option value="" hidden>здесь ваше описание</option>
  ...

UPD. А зачем тэг "javascript"? Собираетесь добавлять "описания" динамически? Если так, есть следующие варианты:

select.innerHTML = '<option value="" hidden>...</option>' + select.innerHTML;

select.insertAdjacentHTML('afterbegin', '<option value="" hidden>...</option>');

const option = document.createElement('option');
option.value = '';
option.hidden = true;
option.innerText = '...';
select.prepend(option);

const option = new Option('...', '');
option.style.display = 'none';
select.insertBefore(option, select.firstElementChild);

https://jsfiddle.net/bkdcexhw/

Раз у вас там vue, используйте модификатор:

<input type="number" v-model.number="Current.amount">

<div id="items"></div>

document.querySelector('.map__filters').addEventListener('change', function() {
  const values = Array.from(
    this.querySelectorAll('.map__checkbox:checked'),
    n => n.value
  );

  const filtered = values.length
    ? data.filter(n => values.every(m => n.features.includes(m)))
    : [];

  document.querySelector('#items').innerHTML = filtered
    .map(n => `<div>${JSON.stringify(n, null, 2)}</div>`)
    .join('');
});

data: () => ({
  now: Date.now(),
  ...
}),
computed: {
  filteredList() {
    return this.list.filter(n => this.parseDate(n.dateend) < this.now);
  },
  ...
},
methods: {
  parseDate: str => new Date(str.split('.').reverse().join('-')),
  ...
},

Можно сделать...

• ...вычисляемое свойство, где к элементам массива будет прицеплено нужное значение:
  
  

  computed: {
    itemsWithBullshitCounter() {
      let counter = -1; /* или 0, если хотите, чтобы нулевой элемент массива получил ненулевой индекс
                           в том случае, если для него не выполняется условие обнуления */
      return this.items.map((n, i) => ({
        ...n,
        counter: counter = (здесь проверяете, надо ли обнулить счётчик
          ? 0
          : counter + 1
        ),
      }));
    },
  },

  
  

  <div v-for="n in itemsWithBullshitCounter">
    вместо индекса используете значение добавленного свойства: {{ n.counter }}
  </div>

  
  https://jsfiddle.net/hk93q6gf/
  
  
• ...вычисляемое свойство, где исходный массив будет разбит на несколько кусков:
  
  

  computed: {
    chunkedItems() {
      return this.items.reduce((acc, n, i) => {
        if (!i || на текущем элементе надо сбросить индексацию) {
          acc.push([]);
        }
  
        acc[acc.length - 1].push(n);
  
        return acc;
      }, []);
    },
  },

  
  

  <template v-for="chunk in chunkedItems">
    у каждого куска индексация независимая:
    <div v-for="(n, i) in chunk">{{ i }}</div>
  </template>

  
  https://jsfiddle.net/hk93q6gf/1/
  
  
• ...метод, который будет вычислять нужный индекс (плохо - вычисления выполняются при каждом рендеринге):
  
  

  methods: {
    createStrangeIndex(arr, baseIndex) {
      let index = 0;
  
      while (baseIndex > 0 && на элементе arr[baseIndex--] сбрасывать индексацию не надо) {
        index++;
      }
  
      return index;
    },
  },

  
  

  <div v-for="(n, i) in items">{{ createStrangeIndex(items, i) }}</div>

  
  https://jsfiddle.net/hk93q6gf/2/
  

есть метод orgajax - он тянет данные с сервера, в том числе и HTML код

А должен - просто данные, на основе которых разметка будет создаваться уже на клиенте. Переделывайте.

Ну или можете путём говнокодера пойти - компилируйте получаемые шаблоны.