0xD34F

Если в одном компоненте произойдет ошибка, будет ли это видно в другом?

Если нет, то подскажите, как...

vuex

Переносите errorOnUpdate в хранилище, а в миксине делаете computed свойство, достающее errorOnUpdate и метод, который будет дёргать мутацию, меняющую значение errorOnUpdate (или просто заменяете присваивание вызовом мутации в методе update, тут вам виднее).

Замените

const Vue = require('vue');

на

const Vue = require('vue').default;

^[a-zA-Z\/-]+\.ph(p|ar)$

Могу предложить пару вариантов.

1. Пусть данные компонента станут свойствами объекта, тогда их можно будет получать по имени свойства. Типа так.

2. Сделайте computed свойство, которое будет представлять текущий набор данных. Типа так.

...

А, ну и конечно ключевое слово this - оно тоже доступно в шаблоне. Так что есть и третий вариант (ну, на самом деле это вариант "полтора" - отличий от первого по сути нет никаких).

UPD. Конечно, все эти три варианта суть одно и то же - получение свойства объекта по имени в переменной. То есть, в конечном счёте, проблема в слабом знании языка. Я бы на вашем месте подтянул основы, а то так и будете сюда бегать с такими вот тривиальными вопросами.

const obj = arr.reduce((max, n) => {
  const val = Object.values(n)[0];
  return val > max[1] ? [ n, val ] : max;
}, [ null, -Infinity ])[0];

@changeMessage="changeMessage"

Да ну? Я вот слышал, будто бы

директивы прослушивания событий v-on внутри DOM-шаблонов автоматически преобразуются в нижний регистр (из-за нечувствительности HTML к регистру), поэтому v-on:myEvent станет v-on:myevent — что делает прослушивание события myEvent невозможным

Просто нужно еще чтобы компонент `SortableElement ` принял все пропсы.

Ну так и передавайте все:

const SortableItem = SortableElement((props) => (
  <ElementItem {...props} />
));

Что не так делаю?

Ну, очевидно же - дёргаете сразу все блоки. А надо только тот, по которому кликнули. Для этого его надо как-то запомнить:

let uploadTo = null;

$('.file-upload-preview').click(function() {
  uploadTo = this;
  $('#file-upload').click();
});

Соответственно, внутри обработчика change заменяете $(".file-upload-preview") на $(uploadTo).

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

const inputSelector = '.hidden_field';
const itemSelector = '.item';
const activeClass = 'active';


// как это может выглядеть с использованием jquery
const $items = $(itemSelector).click(function() {
  $(this).toggleClass(activeClass);
  $(inputSelector).val($items
    .filter(`.${activeClass}`)
    .get()
    .map(n => $(n).text())
    .join(', ')
  );
});

// или, к чёрту jquery
const items = [...document.querySelectorAll(itemSelector)];
items.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.classList.toggle(activeClass);
  document.querySelector(inputSelector).value = items
    .filter(n => n.classList.contains(activeClass))
    .map(n => n.innerText)
    .join(', ');
}

А как выглядит элемент массива ticket? В смысле - есть ли у него свойство ticket, по которому вы пытаетесь фильтровать? Я бы предположил, что вы просто немного запутались в именах свойств и вместо несуществующего ticket (странно же - массив и свойства его элементов имеют одинаковые имена) должно использоваться какое-то другое свойство... например payeer, которое вы выводите в шаблоне. Или ещё что-то.

контент у всех блоков разный - поэтому в массив их не засунуть

Засунуть. За отличающийся контент пусть отвечает отдельное свойство элементов массива. Если же контент вот прям совсем разный, ничего общего - оформить блоки в виде отдельных компонентов, хранить в элементе массива имя компонента - ну а дальше вместе с v-for использовать :is.

const result = Object.entries(commonObj).map(([ k, v ]) => ({
  objDataName: (objectData.find(n => n.key === k) || {}).name || null,
  packageName: (packageData.find(n => n.id === v.package_id) || {}).title || null,
}));

или

const arrToObj = (arr, key, val) =>
  arr.reduce((acc, n) => (acc[n[key]] = n[val], acc), {});

const objects = arrToObj(objectData, 'key', 'name');
const packages = arrToObj(packageData, 'id', 'title');

const result = Object.entries(commonObj).map(n => ({
  objDataName: objects[n[0]] || null,
  packageName: packages[n[1].package_id] || null,
}));

Если делать ровно то, что спрошено:

for (let i = 0; i < 6; i++) {
  const count = res.data.filter(n => +n.categoryid === i).length;
  $(`#category_count_${i}`).html(`(${count})`);
}

Или, вместо многократной фильтрации можно обойтись одним проходом по данным.

Вариант раз - выполняем группировку:

const grouped = res.data.reduce((acc, n) => {
  (acc[n.categoryid] = acc[n.categoryid] || []).push(n);
  return acc;
}, {});

$('[id^="category_count_"]').text(function() {
  return `(${(grouped[/\d*$/.exec(this.id)[0]] || []).length})`;
});

Вариант два - считаем кого сколько:

const counted = res.data.reduce((acc, n) => (
  acc[n.categoryid] = -~acc[n.categoryid],
  acc
), {});

document.querySelectorAll('[id^="category_count_"]').forEach(n => {
  n.textContent = `(${counted[n.id.split('_').pop()] || 0})`;
});

Условие, которому должны удовлетворять объекты:

const checkItem = item => item.categoryid === '3';

Считаем:

const count = response.data.filter(checkItem).length;

// или

const count = response.data.reduce((acc, n) => acc + checkItem(n), 0);

// или

let count = 0;
for (const n of response.data) {
  count += checkItem(n);
}

// или

const count = +eval(response.data.map(checkItem).join('+')) || 0;

// или

const count = (function sum(i, n = response.data[i]) {
  return n ? checkItem(n) + sum(i + 1) : 0;
})(0);

document.addEventListener('click', e => {
  const link = e.target.closest('a');
  if (link) {
    e.preventDefault();
    link.style.display = 'none';
    setTimeout(() => window.location = link.href, 2000);
  }
});

А инициализировать свойство data кто будет? Или вы думаете оно в режиме самообслуживания назначит себе что-то отличное от undefined?

Установка свойства checked не приводит к возникновению события change, так что его следует создавать самостоятельно - добавьте .trigger('change') после вызова prop.

Уберите обработчик события change, он тут не нужен.

<div class="1">

Числа в качестве имён классов использовать не надо.

Убрать transition, добавить анимацию: animation: show 10s;.

Анимироваться будет прозрачность:

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}