0xD34F

Всё работает, просто done надо дёргать по окончании анимации, типа так.

А вы сейчас вызываете done сразу же - ну элемент и удаляется.

Соберите все user_input_* в один объект (user_inputs, например), и тогда можно будет сделать так:

computed: {
  isFilledAll() {
    return Object.values(this.user_inputs).every(n => n.isFilled);
  },
},

Или под "заполнены" вы понимаете не-null значения свойств val_*? Тогда отдельные isFilled не нужны:

isFilledAll() {
  return Object.values(this.user_inputs).every(n => Object.values(n).every(m => m !== null));
}

findIndex(item => item.id = id)

А-а-а-а-а-а-а-а!!!!!!!

Что стоит доизучить?

Доизучите, чем присваивание отличается от проверки на равенство.

UPD. Почему используется findIndex, не очень понятно - можно через find сразу получить нужный элемент:

addToCart(state, id) {
  state.cartItems.push(state.products.find(n => n.id === id));
},

А если там, откуда вы вызываете мутацию, доступен не только id, но и весь объект - можно передавать в мутацию его, и тогда ничего искать будет не надо:

addToCart: (state, product) => state.cartItems.push(product),

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

addToCart({ cartItems, products }, id) {
  let product = cartItems.find(n => n.id === id);
  if (!product) {
    cartItems.push(product = {
      ...products.find(n => n.id === id),
      quantity: 0,
    });
  }

  product.quantity++;
},

time.replace(/0{4}$/, '00')

// или

time.replace(/0{4}$/, m => m.slice(-2))

// или

time.replace(/00(00)$/, '$1')

// или

time.replace(/00(?=00$)/, '')

// или

time.replace(/(?<=00)00$/, '')

// или

time.endsWith('0000') ? time.slice(0, -2) : time

Можно связать компоненты через шину событий.

Или через общего родителя.

Условие допустимости обновления должно быть чуть более сложным - при запрете надо допускать обновление в случае, если вы пытаетесь выполнить разблокировку, т.е:

shouldComponentUpdate(nextProps, nextState) {
  return !this.state.updatesLocked || !nextState.updatesLocked;
}

Есть какой нибудь более удобный способ ?

Под более удобным вы понимаете более короткую запись? Можно заменить обращение к последним элементам массивов на .slice(-1)[0], получится так:

masMain.slice(-1)[0].mas1.slice(-1)[0].mas2.push(objectDoc);

UPD. Наконец-то дождались, и трёх лет не прошло: masMain.at(-1).mas1.at(-1).mas2.push(objectDoc);.

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

Как превратить в массив значений id...

const ids = [].concat(...data.result.map(n => n.test.map(m => m.id)))

...и уже в нем искать значение, равное 12?

ids.includes(12)

Но вообще, можно обойтись и без массива id:

data.result.some(n => n.test.some(m => m.id === 12))

О каких классах идёт речь:

const outerClass = 'item';
const innerClass = 'hidden';

Как скрыть элемент:

const hide = el => el.style.display = 'none';
// или
const hide = el => el.style.setProperty('visibility', 'hidden');
// или
const hide = el => el.style.cssText += 'opacity: 0';
// или
const hide = el => el.setAttribute('style', 'transform: scale(0)');
// или
const hide = el => el.hidden = true;

Скрываем:

document.querySelectorAll(`.${innerClass}`).forEach(n => {
  if (n = n.closest(`.${outerClass}`)) {
    hide(n);
  }
});

// или

for (const n of document.getElementsByClassName(outerClass)) {
  if (n.querySelector(`.${innerClass}`)) {
    hide(n);
  }
}

UPD. Наконец-то дождались, теперь js тут использовать необязательно:

.item:has(.hidden) {
  display: none;
}

как это правильно называется

Это называется прогрессбар.

Присутствует в любом уважающим себя наборе ui-компонентов - vuetify, bootstrap-vue, element, vue material... Также на awesome-vue можете найти ряд отдельных компонентов. Ну или сделайте свой, ничего сложного в этом нет: два элемента div с различными background-color, один вложен в другой, у родительского ширина 100%, у дочернего - в зависимости от текущего значения.

const obj = eval(`(${document.querySelector('.link').dataset.test})`);

Или, чтобы можно было JSON.parse использовать, пишите в атрибут корректный json, надо заменить одинарные кавычки на двойные, а само значение атрибута в одинарных писать:

data-test='{"test1": "1", "test2": "2", "test3": "903", "test4": "4"}'

в идеале, чтобы каждое нажатие на ссылку делало один поворот по часовой стрелке на 90 градусов

Можно сделать несколько классов, для каждого из которых определён свой поворот, и последовательно их менять:

.rotate0   { transform: rotate(0deg); }
.rotate90  { transform: rotate(90deg); }
.rotate180 { transform: rotate(180deg); }
.rotate270 { transform: rotate(270deg); }

<a href="#" data-rotate="-1">Повернуть на -90 градусов</a>
<a href="#" data-rotate="+1">Повернуть на +90 градусов</a>

const photo = document.querySelector('.photo');
const classes = [ 'rotate0', 'rotate90', 'rotate180', 'rotate270' ];
let index = 0;

document.addEventListener('click', function(e) {
  const rotate = +e.target.dataset.rotate;
  if (rotate) {
    photo.classList.remove(classes[index]);
    index = (index + rotate + classes.length) % classes.length;
    photo.classList.add(classes[index]);
  }
});

UPD. Вынесено из комментариев:

а можно пример, чтобы поворачивать по 1 градусу и в обратную сторону

Для поворота по одному градусу я конечно не стал бы делать отдельные классы, а вписывал бы нужное значение в style.transform:

<a href="#" data-rotate="-1">rotate ccw</a>
<a href="#" data-rotate="+1">rotate cw</a>

const photo = document.querySelector('.photo');
let angle = 0;

document.querySelectorAll('[data-rotate]').forEach(n => n.addEventListener('click', onClick));

function onClick({ target: { dataset: { rotate } } }) {
  angle = (angle + +rotate + 360) % 360;
  photo.style.transform = `rotate(${angle}deg)`;
}

str.split('-').reverse().join('.')

// или

str.replace(/(\d+)-(\d+)-(\d+)/, '$3.$2.$1')

// или

new Date(str).toLocaleDateString('ru-RU')

// или

str.match(/\d+/g).reduce((acc, n) => n + (acc && '.') + acc, '')

Вы указали состояние к которому осуществляется переход, вместо того, чтобы стилизовать должным образом сам элемент. Либо впишите применяемую ширину непосредственно в css, либо укажите её в качестве подстановочной. Должно было получится что-то вроде этого?

можно как-то, грубо говоря, весь изменяемый объект наверх посылать

Можно.

Или пару ключ-значение. В этом случае обработчик в родительском компоненте останется один, и выглядеть будет примерно так:

@change="onChange"

methods: {
  onChange(e) {
    this.userProps[e.name] = e.val;
  }
}

Элементам с сообщениями об ошибках назначайте класс (это в методе showMessage):

messageNode.classList.add('error-message');

По которому перед проверкой (это в начале метода checkFieldType) вы их будете находить и удалять:

self.formElement.querySelectorAll('.error-message').forEach(n => n.remove(n));

flex-grow: 1;
flex-basis: 0;

что не так в скрипте

А что, думаете функция сама себя должна привязать к чекбоксу в качестве обработчика события change? Нет, так не будет - это ваша работа.

можно ли его сделать проще

Можно:

document.querySelector('#play').addEventListener('change', e => {
  document.querySelector('.block').style.opacity = +e.target.checked;
});

Или, вообще без js:

#play:checked ~ div > .block {
  opacity: 1;
}

Это нормально...

Нормально.

...или можно как то его оставить что бы не рендерит по новой?

Можно - используйте keep-alive.