0xD34F

Такие есть варианты:

1. Сделать отдельный tbody для каждой пары строк. Переносите tbody из компонента таблицы в компонент строки - будет там корневым элементом:
   
   

   <tbody>
     <tr>... </tr>
     <tr v-if="...">...</tr>
   </tbody>

   
   Пример.
   
   
2. Сделать компонент строки функциональным - там может быть несколько корневых узлов. Пример.
   
3. Отказаться от использования компонента строки, рендерить tr сразу в компоненте таблицы:
   
   

   <tbody>
     <template v-for="...">
       <tr>... </tr>
       <tr v-if="...">...</tr>
     </template>
   </body>

   
   Пример.
   
   
4. Переехать на Vue 3 - там можно сделать компонент с несколькими корневыми узлами. Пример.
   
5. Попробовать использовать костыль. Здесь примера не будет - к этой штуке не прикасался и не собираюсь.
   

А откуда там взяться массиву в массиве и т.д.? Нужен массив объектов, которые описывают поля формы, а также объект с данными формы (это то, что сейчас у вас представлено отдельными свойствами). Всё:

data: () => ({
  formData: {},
  formMeta: [
    { name: 'phone', title: 'Телефон', type: 'text', placeholder: 'Телефон' },
    { name: 'email', title: 'E-mail', type: 'text', placeholder: 'E-mail' },
    { name: 'address', title: 'Адрес', type: 'text', placeholder: 'Адрес' },
    ...
  ],
}),

this.$emit('save-contact', this.formData);

<div v-for="n in formMeta">
  <span class="form__other-title">{{ n.title }}</span>
  <div class="form__other-data">
    <input
      v-model="formData[n.name]"
      :type="n.type"
      :placeholder="n.placeholder"
    >
  </div>
</div>

работать с dom напрямую плохая практика

Не всегда. Зависит от задачи.

Пусть компонент табов принимает в качестве параметров массив значений, описывающих табы и значение, обозначающее активный таб:

props: [ 'items', 'value' ],

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

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

Создадим сами табы и элемент подчёркивания:

<ul class="tabs">
  <li
    v-for="n in items"
    :key="n.value"
    @click="$emit('input', n.value)"
    class="tabs-item"
  >{{ n.text }}</li>
</ul>
<div
  class="tabs-slider"
  :style="sliderStyles"
></div>

Элементу подчёркивания (.tabs-slider) зададим абсолютное позиционирование и transition.

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

mounted() {
  this.$watch(
    'value',
    value => {
      const index = this.items.findIndex(n => n.value === value);
      const el = this.$el.querySelectorAll('.tabs-item')[index];
      this.sliderStyles = el
        ? {
            left: `${el.offsetLeft}px`,
            width: `${el.offsetWidth}px`,
          }
        : null;
    },
    {
      immediate: true,
    }
  );
},

https://jsfiddle.net/vsr5tLue/

const sortedArr = arr
  .map(n => [ n, new Date(n.date.replace(/(\d+)\.(\d+)\.(\d+)/, '$3-$2-$1')) ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);

arr[0].split(' ') + arr[3:]

\[(.+?)\]\s?([^\[]+)

Отсортировать массив, при суммировании в качестве слагаемого брать текущий элемент массива или предыдущее слагаемое + 1, в зависимости от того, кто окажется больше:

const getMinimumUniqueSum = arr => [...arr]
  .sort((a, b) => a - b)
  .reduce((acc, n) => (acc[1] += acc[0] = Math.max(acc[0] + 1, n), acc), [ -Infinity, 0 ])
  .pop();

Передавайте в мутацию вместо 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, использование которого для вашего случая может выглядеть так, например.