0xD34F

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

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;
  }
}

Используйте v-if - пока данных нет, не надо пытаться на их основе ничего рендерить. Как-то так:

<thead v-if="options.head">
...
<tbody v-if="options.body">

Сделаем функцию, которая нарезает массив на куски указанного размера:

const getChunks = (arr, chunkSize) =>
  Array.from(
    { length: Math.ceil(arr.length / chunkSize) },
    (n, i) => arr.slice(i * chunkSize, (i + 1) * chunkSize)
  );

// или

const getChunks = (arr, chunkSize) =>
  arr.reduce((acc, n, i) => (
    i = i / chunkSize | 0,
    (acc[i] = acc[i] || []).push(n),
    acc
  ), []);

// или

const getChunks = (arr, chunkSize) =>
  arr.reduce((acc, n, i) => (
    (i % chunkSize) || acc.push([]),
    acc[acc.length - 1].push(n),
    acc
  ), []);

Ну и воспользуемся ею:

const arr = [...Array(50).keys()];
const chunks = getChunks(arr, 7);

body {
  overflow: hidden;
}

Как получить элементы:

const links = document.querySelectorAll('a');
// или
const links = document.getElementsByTagName('a');

Как достать значение атрибута:

const getHref = el => el.getAttribute('href');
// или
const getHref = el => el.attributes.href.value;

Как собрать массив значений:

const hrefs = Array.from(links, getHref);

// или

const hrefs = Array.prototype.map.call(links, getHref);

// или

const hrefs = [];
for (const n of links) {
  hrefs.push(getHref(n));
}

// или

const hrefs = [];
for (let i = 0; i < links.length; i++) {
  hrefs[i] = getHref(links[i]);
}

Ведь у пустого массива есть численное представление: +[] вернет 0.

И что с того? В выражении false+[] нет преобразования массива в число. Есть сложение - массив преобразовывается в строку, false тоже. Если интересуют детали - можете ознакомится со спецификацией.

Ясно же написано - метод не определён. Добавьте его в methods компонента:

methods: {
  trans
}

В state.FIELDS.formFieldsMap данные лежат

А точно лежат? - может, не лежат, а подгружаются посредством запроса к базе данных или ещё куда. А пока не подгрузились, FIELDS является пустым объектом, никакого свойства formFieldsMap у него нет. Соответственно, геттер возвращает undefined. Может же такое быть?

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

Действительно, а как тогда быть?

Можно заглушку какую-нибудь возвращать, если ничего нет, например:

getters: {
  transportFields: state => state.FIELDS.formFieldsMap || [],
  ...

А лучше - заранее создать в FIELDS нужное свойство, с пустым массивом в качестве начального значения.

mutations: {
  [GET_USER_INFO](state) {
    axios.get('http://localhost:3000/user')
      ...

Ох ни хрена ж себе. Документацию-то читали?

хочется, чтоб saveProfile или действие, которое внутри - this.$store.dispatch('loadInfo') вызывалось сразу после того, как загружено начальное состояние

created

<alien-component
  :value="value"
  @input="$emit('input', this.$event.target.value)" 
/>

Никаких target'ов не надо, вы из компонента получаете само значение, так что правильно будет так:

<alien-component
  :value="value"
  @input="$emit('input', $event)" 
/>

Как-то всё у вас до хрена усложнено, просто мрак какой-то. Можно же гораздо проще:

<div id="sound-btn-wrapper">
  <div class="btn btn-start">On</div>
  <div class="btn btn-stop">Off</div>
</div>

const audio = new Audio('...');

$('#sound-btn-wrapper').on('click', '.btn', function() {
  audio.pause();

  if ($(this).hasClass('btn-start')) {
    audio.currentTime = 0;
    audio.play();
  }
});

Я не понимаю как можно увеличить плавно блок, чтобы расширялся равномерно со всех сторон и также чтобы менялась картинка на другую и плавно увеличивалась

Увеличение - с помощью scale, картинку показывать "плавно" можно с помощью opacity. Как-то так.