0xD34F

const find = (arr, id) =>
  (Array.isArray(arr) ? arr : []).reduce((found, n) =>
    found ?? (n.id === id ? n : find(n.children, id))
  , null);


const obj = find(arr, id);
if (obj) {
  obj.isSelected = isSelected;
}

• Если только один элемент может изменить свой цвет, то добавляем в компонент свойство, которое будет содержать индекс такого элемента или его id или ещё что-то уникальное. В зависимости от его равенства этой уникальной характеристике элемента назначаем класс:
  
  

  data: () => ({
    active: null,
  }),

  
  

  <div class="item" v-for="i in 5">
    <div class="parent" @click="active = active === i ? null : i">
      <div class="child" :class="active === i ? 'green' : 'red'">{{ i }}</div>
    </div>
  </div>

  
  
• Если одновременно несколько элементов могут менять свой цвет, то надо хранить состояния каждого:
  
  

  data: () => ({
    items: Array(5).fill(false),
  }),

  
  

  <div class="item" v-for="(n, i) in items">
    <div class="parent" @click="$set(items, i, !n)">
      <div class="child" :class="{ green: n, red: !n }">{{ i + 1 }}</div>
    </div>
  </div>

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

  props: [ 'text' ],
  data: () => ({
    active: 0,
  }),

  
  

  <div class="item">
    <div class="parent" @click="active ^= 1">
      <div class="child" :class="[ 'red', 'green' ][active]">{{ text }}</div>
    </div>
  </div>

  
  И создавать сколько надо экземпляров:
  
  

  data: () => ({
    items: Array.from({ length: 5 }, (_, i) => `item #${-~i}`),
  }),

  
  <v-item v-for="n in items" :text="n"></v-item>
  
  

Потому что count, к которому вы добавляете единицу - это тот, который был при первом рендеринге компонента. Нужен доступ к актуальному - вместо числа передавайте в setCount функцию: setCount(count => count + 1);.

что я делаю не так?

Одно из двух: не читаете документацию, или взялись за react не зная языка.

Одна валюта:

arr.reduce((acc, n) => acc + +(n.startsWith(`${currency} `) && n.match(/\d+$/)), 0)

Все:

arr.reduce((acc, n) => {
  const [ currency, sum ] = n.split(' ');
  acc[currency] = (acc[currency] ?? 0) + +sum;
  return acc;
}, {})

Во-первых - вы не рассказали, зачем вам тут нужны именно классы. А значит - классы вам не нужны. Меняйте на data-атрибут. Например, type (data-type).

Во-вторых, как из элемента извлечь значение атрибута, а из значения атрибута убрать цифры:

const getTypeGroup = el => el.dataset.type.replace(/\d/g, '');

// или

const getTypeGroup = el => el.getAttribute('data-type').match(/\D+/)[0];

// или

const getTypeGroup = el => el.attributes['data-type'].value.split(/\d/).shift();

В третьих:

document.addEventListener('click', e => {
  const el = e.target.closest('[data-type]');
  if (el) {
    console.log(getTypeGroup(el));
  }
});

// или

document.querySelectorAll('[data-type]').forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(getTypeGroup(e.currentTarget)));

routers: [

Слова "router" и "route" - это не одно и то же.

Внутри обработчика submit добавьте this в качестве второго параметра при вызове $.

Если отвечать на вопрос из заголовка - надо target заменить на currentTarget.

Но можно ответить и на тот, что в основном тексте:

что я сделал не так?

Почему у вас внутри ul находятся i и div? Почему li находится внутри div? Разберитесь, кого чьим контентом можно и нельзя делать.

Стучаться напрямую к элементам не надо: значение #hide должно браться из стейта, обновлять надо стейт; innerText, который вы хотите получить - его также надо брать из стейта.

Метод selectItem - подумайте, как его переписать так, чтобы вместо объекта события (который вам нужен ради свойства target, да?) он принимал данные, на основе которых создан li.

Вспомогательная функция - нарезание массивоподобного объекта на куски заданного размера:

const chunked = (data, chunkSize, slice = data.slice) =>
  Array.from(
    { length: Math.ceil(data.length / chunkSize) },
    function(_, i) {
      return this(i * chunkSize, (i + 1) * chunkSize);
    },
    (slice instanceof Function ? slice : Array.prototype.slice).bind(data)
  );

Где элементы находятся, во что и по сколько надо оборачивать:

const parentSelector = '.row-module';
const wrapperTag = 'div';
const wrapperClass = 'wrap';
const wrapSize = 4;

Оборачиваем:

for (const $n of chunked($(parentSelector).children(), wrapSize)) {
  $n.wrapAll(`<${wrapperTag} class="${wrapperClass}">`);
}

или

const parent = document.querySelector(parentSelector);
chunked(parent.children, wrapSize).forEach(n => {
  parent.append(document.createElement(wrapperTag));
  parent.lastChild.classList.add(wrapperClass);
  parent.lastChild.append(...n);
});

content: "";
display: inline-block;
font-size: 10px;
width: 1em;
height: 1em;
transform: rotate(45deg);
border: 2px solid #fff;
border-left: none;
border-bottom: none;

Элементы, которым надо переключить класс (т.е., контент и заголовки табов) следует искать не по всей странице, а внутри контейнера, содержащего те табы, с которыми осуществляется взаимодействие. Т.е., от нажатого заголовка надо подняться до контейнера:

const containerSelector = '.tabs';
const headerSelector = `${containerSelector} .tabs-nav__item`;
const contentSelector = `${containerSelector} .tab`;
const activeClass = 'is-active';

function setActiveTab(header) {
  if (header instanceof Element && header.matches(headerSelector)) {
    const container = header.closest(containerSelector);
    const headers = container.querySelectorAll(headerSelector);
    const contents = container.querySelectorAll(contentSelector);
    const index = Array.prototype.indexOf.call(headers, header);
    const toggle = (n, i) => n.classList.toggle(activeClass, i === index);

    headers.forEach(toggle);
    contents.forEach(toggle);
  }
}


// делегирование, подключаем обработчик клика один раз для всех
document.addEventListener('click', e => {
  setActiveTab(e.target.closest(headerSelector));
});

// или, назначаем обработчик клика индивидуально каждому заголовку
document.querySelectorAll(headerSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => setActiveTab(e.currentTarget));

Вычисляемое свойство, сеттер которого будет вызывать мутацию.

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

function getUsersInfo(ids, callback) {
  const results = [...Array(ids.length)];

  ids.forEach((n, i) => {
    getUserInfo(n, user => {
      results[i] = user;

      if (results.every(Boolean)) {
        callback(result);
      }
    });
  });
}

Вместо id назначаете элементам классы, которые будут указывать, чем является элемент (его надо кликать пользователю, или при клике переключать видимость) и атрибут, совпадающие значения которого будут указывать, кто с кем в паре:

<div class="title" data-name="first">
<div class="title" data-name="second">
...


<div class="list" data-name="first">
<div class="list" data-name="second">
...

$('.title').click(function() {
  $(`.list[data-name="${this.dataset.name}"]`).slideToggle('fast');
});

Если у обоих групп элементов есть общий родитель, и порядок элементов внутри родителей совпадает, тогда можно обойтись без дополнительного атрибута:

$('.title').click(function() {
  $('.list').eq($(this).index()).slideToggle('fast');
});

Если же общие предки есть у пар .title /.list, тогда можно так:

$('.title').click(function() {
  $(this).closest('здесь селектор общего предка').find('.list').slideToggle('fast');
});

async function addOptions(arr) {
  const result = [];

  for (const item of arr) {
    result.push({
      ...item,
      options: await fetchOptions(item.id),
      children: await addOptions(item.children),
    });
  }

  return result;
}

document.addEventListener('input', function(e) {
  const inputsWrapper = e.target.closest('.класс-блоков-которые-содержат-ваши-инпуты');
  if (inputsWrapper) {
    const inputs = [...inputsWrapper.querySelectorAll('input')];
    const lastInput = inputs.pop();
    lastInput.value = inputs.map(n => n.value).join(' ');
  }
});

str.slice(0, 3) + '-'.repeat(Math.max(0, str.length - 3))

// или

str.replace(/(?<=.{3})./g, '-')

// или

Array.from(str, (n, i) => i < 3 ? n : '-').join('')

// или

str.replace(/./g, (m, i) => i < 3 ? m : '-')

// или

str.match(/.{0,3}/) + Array(Math.max(0, str.length - 2)).join`-`

// или

str.substring(0, 3).padEnd(str.length, '-')

moment.js:

moment.locale('ru');

const formatDate = dateStr => moment(dateStr, 'YYYY.MM.DD').format('D MMMM YYYY');

data: () => ({
  dateStr: '2020.06.01',
}),
computed: {
  formattedDate() {
    return formatDate(this.dateStr);
  },
},
methods: {
  formatDate1: formatDate,
},
filters: {
  formatDate2: formatDate,
},

<div>{{ formattedDate }}</div>
<div>{{ formatDate1(dateStr) }}</div>
<div>{{ dateStr | formatDate2 }}</div>

https://jsfiddle.net/j5ubmtnL/