0xD34F

history: createMemoryHistory(),

Vue-router не изменяет url страницы

А должен? Лично я слышал, что нет:

The memory history mode doesn't assume a browser environment and therefore doesn't interact with the URL

Версия vue какая?

Если 3, то всё ясно:

BREAKING: When used on custom components, v-model prop and event default names are changed:

• prop: value -> modelValue;
  
• event: input -> update:modelValue;
  

Если 2 - явных косяков не видно, воспроизводите проблему в песочнице, ссылку сюда.

Что-то не видать в документации соответствующей настройки (UPD. Да её и нет, глянул в исходниках, как происходит добавление колонки с чекбоксами - unshift, и ничего больше). Давайте закостылим - добавляем колонку, которая будет дублировать данный функционал, а оригинальную спрячем:

const columns = [
  ...
  { name: 'selection' },
];

.xxx tr > :first-child {
  display: none;
}

<q-table
  ...
  table-class="xxx"
>
  <template #header-cell-selection="props">
    <q-th :props="props">
      <q-checkbox v-model="props.selected" />
    </q-th>
  </template>

  <template #body-cell-selection="props">
    <q-td :props="props">
      <q-checkbox v-model="props.selected" />
    </q-td>
  </template>
</q-table>

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

.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>

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

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 : '' }"
  ...

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

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

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

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

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

.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 по массиву дополнительных полей.

Всё.

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

UPD. Вот вариант с v-model, конечно только на уровне таблицы, в строках всё по-прежнему.

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

const addCard = (cardName) => {
  cards.value.push({
    id: Date.now(),
    component: cardName,
    order: cards.value.length + 1,
    isRequired: false
  })
}

Что такое cardName? Не то, что вам, судя по имени параметра, кажется. Это не имя, а сам объект компонента. И вы его потом в localStorage засовываете. Так что методы setup и render теряются.

Сложите компоненты в объект:

const components = {
  ShortTextCard,
  LongTextCard,
  SingleQuestionCard,
  MultiQuestionCard,
};

Передавайте в addCard их имена:

- @click="addCard(ShortTextCard)"
+ @click="addCard('ShortTextCard')"

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

- :is="card.component"
+ :is="components[card.component]"

handleEdit(row){

@click="handleEdit(scope.$index, scope.row)"

Сколько параметров получает метод handleEdit? А сколько передаёте ему в обработчике клика? Устраните это печальное несоответствие.

path:'/protocol_information/:id/edit/',
params:{
    id:row.id
}

Вместо path должен быть name. Конечно, если таковой указан при определении маршрута.

Или, вырезаете params и вставляете нужный id сразу в строку:

path: `/protocol_information/${row.id}/edit/`,