0xD34F

Передавайте в мутацию вместо id сам объект комментария - тогда ничего искать будет не надо.

Или сделайте рекурсивную функцию поиска, что-то вроде

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

Никакой "аналог foreach" тут не нужен.

Сделайте компонент: получает через слот контент, который надо показывать/скрывать; содержит свойство, в зависимости от значения которого переданный контент отображается или нет; переключает значение свойства, управляющего видимостью контента, по клику. Как-то так:

data: () => ({
  opened: false,
}),

<div class="dropdown">
  <div class="dropdown-header" @click="opened = !opened">
    <slot name="header" :opened="opened">
      {{ opened ? 'CLOSE' : 'OPEN' }}
    </slot>
  </div>
  <div v-if="opened" class="dropdown-content">
    <slot name="content"></slot>
  </div>
</div>

Ну а дальше можете создавать экземпляры этого компонента - сколько вам надо и где надо. Всё.

Обработчик события прицеплен к какому-то непонятному div'у вместо экземпляра компонента. Неудивительно, что он не вызывается.

button с классами .tool и .название цвета

Повелеваю: цвет унести в data-атрибут.

let color = '#000';

document.querySelector('селектор контейнера с кнопками').addEventListener('click', e => {
  if (e.target.classList.contains('tool')) {
    color = e.target.dataset.color;
  }
});

document.querySelector('селектор контейнера с "пикселями"').addEventListener('click', e => {
  if (e.target.classList.contains('pixel')) {
    e.target.style.backgroundColor = color;
  }
});

уберите из data свойство labels

или сделайте нормальные значения labels - такие, чтобы в их интервал попадали все значения из наборов данных

filterBox.forEach(n => {
  n.classList.toggle('none', ![ 'all', n.dataset.work ].includes(filterBtn));
});

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

const container = document.querySelector('.side__nav');
const itemSelector = 'li';
const activeClass = 'is-active';

Переключаем:

container.addEventListener('click', function(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    this.querySelector(`${itemSelector}.${activeClass}`)?.classList.remove(activeClass);
    item.classList.add(activeClass);
  }
});

или

const items = container.querySelectorAll(itemSelector);
const onClick = e => items.forEach(n => n.classList.toggle(activeClass, n === e.currentTarget));
items.forEach(n => n.addEventListener('click', onClick));

Если заранее известно только значение атрибута:

const element = document.querySelector(`.js-filter-wrap a[data-filter="${конкретноеЗначение}"]`);
if (element) {
  ...

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

const element = [...elements].find(n => n.dataset.filter === конкретноеЗначение);
if (element) {
  ...

Свойство slidesPerColumn.

Надо определить две оси Y:

options: {
  scales: {
    yAxes: [
      { id: 'y1', position: 'left' },
      { id: 'y2', position: 'right' },
    ],
  },
},

приложение делается на vue

Есть vue-chartjs, использование которого для вашего случая может выглядеть так, например.

<script src="script.js" />

Так нельзя:

In HTML, the use of this syntax is restricted to void elements and foreign elements. If it is used for other elements, it is treated as a start tag.

1. Собрать из вложенных массивов один общий
   
2. Отсортировать полученный массив
   
3. Взять сколько надо первых/последних (зависит от направления сортировки) элементов
   

const result = arr
  .flatMap(n => n.subcategories)
  .sort((a, b) => a.rating - b.rating)
  .slice(-2);

Свойство coords - переместить из компонента с картой в vuex. Тогда в компоненте элемента списка можно будет делать что-то вроде @click="$store.commit('setCoords', marker.coords)".

Здесь useEffect не нужен. Замените его на useMemo или вообще не используйте никаких хуков, сразу доставайте нужное значение.

Там, внутри самой спецификации, всё объясняется:

1. Internal Methods and Internal Slots:
   
   

   Internal methods and internal slots are identified within this specification using names enclosed in double square brackets...

   
   
2. Well-Known Symbols:
   
   

   Within this specification a well-known symbol is referred to by using a notation of the form @@name...

   
   
3. Well-Known Intrinsic Objects:
   
   

   Within this specification a reference such as %name% means the intrinsic object...

   
   

let displayMessage = '';
doItems.forEach((item, i) => {
    displayMessage += `
    <li class="do__item">
        <input type="checkbox" id="do_${i}" ${item.checked ? 'checked': ' '}>
        <label for="do_${i}" class="${item.checked ? 'checked' : ' '}">${item.message}</label>
        <button class="remove" id="do_${i}">Delete</button>
    </li>`;
    block.innerHTML = displayMessage;
});

Установка значения block.innerHTML должна производиться после forEach'а, а не внутри.

UPD. Кстати, а какого хрена у вас элементы с одинаковыми id (input и button)?

data: () => ({
  sortBy: '',
  ...
}),

<v-btn @click="sortBy = 'имя_свойства_по_которому_надо_выполнить_сортировку'">click me</v-btn>

<v-data-table :sort-by.sync="sortBy">...</v-data-table>

Если при повторном клике надо переключать порядок сортировки, тогда так:

data: () => ({
  sortBy: [],
  sortDesc: [],
  ...
}),
methods: {
  sort(colName) {
    const sameCol = this.sortBy[0] === colName;
    const sortDesc = this.sortDesc[0];

    this.sortBy = sameCol && sortDesc ? [] : [ colName ];
    this.sortDesc = sameCol && sortDesc ? [] : [ sameCol ];
  },
  ...
},

<v-btn @click="sort('имя_свойства_по_которому_надо_выполнить_сортировку')">click me</v-btn>

<v-data-table :sort-by.sync="sortBy" :sort-desc.sync="sortDesc">...</v-data-table>

В случае же сортировки по нескольким свойствам, метод sort будет выглядеть следующим образом:

sort(colName) {
  const index = this.sortBy.indexOf(colName);
  if (index === -1) {
    this.sortBy.push(colName);
    this.sortDesc.push(false);
  } else if (this.sortDesc[index]) {
    this.sortBy.splice(index, 1);
    this.sortDesc.splice(index, 1);
  } else {
    this.$set(this.sortDesc, index, true);
  }
},

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

<v-btn @click="sort('имя_свойства_по_которому_надо_выполнить_сортировку')">click me</v-btn>

<v-data-table ref="table">...</v-data-table>

methods: {
  sort(colName) {
    const index = this.свойство_описывающее_столбцы_таблицы.findIndex(n => n.value === colName);
    this.$refs.table.$el.querySelector('thead tr').cells[index].click();
  },
  ...
},

Определяете максимальное расстояние от курсора, на котором элементы должны начинать движение. По событию mousemove на родителе считаете расстояния до элементов (теорема Пифагора), тем, кто достаточно близко, задаёте translate. Чтобы смена положения была плавной, в стилях определяете transition для translate'а.

https://jsfiddle.net/w6jf480k/1/