0xD34F

Определить классы для выделения текста:

.waiting { background: yellow; }
.working { background: green; }
.completed { background: blue; }

Определить, какому тексту какой класс соответствует:

const highlight = {
  'Ожидание': 'waiting',
  'Работа': 'working',
  'Завершено': 'completed',
};

Дальше остаётся эти классы назначить кому надо.

Класс получает элемент внутри ячейки:

<el-table-column label="Процесс">
  <template #default="{ row: { process } }">
    <span :class="highlight[process]">{{ process }}</span>
  </template>
</el-table-column>

Или, класс получает сама ячейка таблицы:

const cellClassName = ({ column, row }) =>
  column.property === 'process'
    ? (highlight[row.process] ?? '')
    : '';

<el-table
  :cell-class-name="cellClassName"
  ...
>

prefix-icon="calendar-icon"

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

UPD. Документацию с первого раза полностью прочитать не осилил, как подсказывают в комментариях - строку указывать всё-таки можно. Окей, вот строка с именем компонента.

Разберитесь с версией vue, для которой смотрите примеры кода.

- <template slot="prefix">
+ <template #prefix>

погуглил за вас

function parseDate(str) {
  const months = Array.from(
    { length: 12 },
    (_, i) => new Date(0, i).toLocaleString('ru-RU', { month: 'long' })
  );

  const [ , month, day, year, hour, minute ] = str.match(/(\S+) (\d+), (\d+) (\d+):(\d+)/);

  return +new Date(
    year,
    months.indexOf(month.toLowerCase()),
    day,
    hour,
    minute
  );
}

Отдельные циклы для чисел за текущий и предыдущий месяцы (кстати, а где у вас следующий?) не нужны. Чтобы получить число, надо не на счётчик цикла смотреть, а на дату - начальным значением будет первое число месяца минус количество дней, прошедших с последнего понедельника. Цикл крутить надо не до конца месяца, а немного дальше - чтобы общее количество чисел было кратно семи (т.е., чтобы в последней неделе не было отсутствующих дней) и всегда одно и то же (чтобы размер календаря не зависел от отображаемого месяца). Вот так.

Собираем селектор на основе состояния чекбоксов (выставлен - класс должен присутствовать, не выставлен - помещаем класс внутрь :not), проверяем фильтруемые элементы на соответствие селектору:

document.querySelector('.options').addEventListener('change', e => {
  const [ not, has ] = Array.prototype.reduce.call(
    e.currentTarget.querySelectorAll('input'),
    (acc, n) => (acc[+n.checked].push(`.${n.value}`), acc),
    [ [], [] ]
  );

  const selector = `${has.join('')}:not(${not.join(',')})`;

  for (const n of document.querySelector('.box').children) {
    n.classList.toggle('hidden', !n.matches(selector));
  }
});

Или, при обработке элемента перебираем чекбоксы и проверяем, что их состояния соответствуют наличию классов:

const checkboxes = [...document.querySelectorAll('.options input')];
const items = [...document.querySelector('.box').children];

checkboxes.forEach(n => n.addEventListener('change', onChange));

function onChange() {
  items.forEach(({ classList: cl }) => {
    cl.toggle('hidden', checkboxes.some(n => n.checked !== cl.contains(n.value)));
  });
}

const blocks = ref(Array.from({ length: 5 }, (_, i) => (-~i) ** 2));
const active = ref(0);

function next() {
  active.value = (active.value + 1 + blocks.value.length) % blocks.value.length;
}

let intervalId = null;
onMounted(() => intervalId = setInterval(next, 500));
onUnmounted(() => clearInterval(intervalId));

<div
  v-for="(n, i) in blocks"
  v-text="n"
  :class="[ 'box-item', { active: i === active } ]"
></div>

Конечно, зашивать в стили цвета блоков и их количество - все эти :nth-child - не круто. Лучше сделать компонент, принимающий массив цветов и создающий блоки на его основе. Соответственно, вместо класса будет назначаться цвет фона напрямую, как-то так:

<div
  v-for="(n, i) in colors"
  :style="{ backgroundColor: i === active ? n : '' }"
  ...

Вместо общего массива выбранных значений сделать отдельные для каждого из свойств.

Чтобы не дублировались чекбоксы, создавать их на основе уникализированных массивов значений свойства вместо массива данных.

Чтобы поменьше копипастить, оформить чекбоксы в отдельный компонент - принимает массив доступных значений, массив выбранных значений, функцию установки выбранных значений.

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

https://jsfiddle.net/bqyxa0kL/

function onVisibleChange(state) {
  if (!state) {
    document.activeElement.blur();
  }
}

<el-date-picker
  @visible-change="onVisibleChange"
  ...

почему при изменении даты передаваемой в пропс не обновляется значение в самом компоненте таймера?

Встречный вопрос - почему вы решили, что внутреннее состояние компонента обновляться должно? Покажите, где вы обновляете targetDate при изменении props.date. Нет, можете себя не утруждать - ничего такого у вас нет.

Не надо никакого targetDate, рассчитываем дни-часы-минуты-секунды сразу на основе props.date - так при изменении props.date не придётся предпринимать никаких дополнительных телодвижений, всё посчитается как надо при следующем вызове updateCountdown. Вот как-то так.

Понимаю что можно сделать проще с помощью split, но хочу научиться именно с помощью регулярного выражения

Одно другому не мешает:

str.split(/\n(?=#EXTINF)/)

Просто исправить существующий код:

- acc[key] = [value];
+ (acc[key] ??= []).push(value);

Но можно его ещё и сократить:

const convertQueryStringToObject = str => Array
  .from(new URLSearchParams(str))
  .reduce((acc, n) => ((acc[n[0]] ??= []).push(n[1]), acc), {});

Или неоправданно усложнить и изуродовать:

const convertQueryStringToObject = str => Array
  .from(str.matchAll(/([^&]+)=([^&]+)/g))
  .reduce((acc, [ , k, v ]) => (
    Object.hasOwn(acc, k) || (acc[k] = []),
    acc[k][acc[k].length] = v,
    acc
  ), {});

.no-overflow {
  overflow: hidden;
}

mounted() {
  this.$watch(
    () => this.isModalAddVisible || this.activeId,
    val => document.body.classList.toggle('no-overflow', val),
    { immediate: true }
  );
},

Одно непонятно - зачем отслеживать несколько разных свойств, если наличием скролла может управлять само модальное окно? Открылось - убирает скролл, закрылось - возвращает. Разные окна для разных задача? - сделайте общий компонент, а разницу для конкретных экземпляров определяйте через слоты.

Данные слайдов сложить в массив. Сделать вычисляемое свойство - данные всех слайдов кроме верхнего. Создать верхний слайд, создать остальные слайды на основе вычисляемого свойства. Если нужна анимация перемещения, завернуть слайды в transition-group. Вот так всё просто.

Сложить имена основных полей в массив.

Сделать вычисляемое свойство, представляющее имена дополнительных полей - надо получить список ключей editedItem и выкинуть из него имена основных полей.

В диалоговом окне сделать v-for по массиву дополнительных полей.

Всё.