0xD34F

Не подключен jquery.

Лишний пробел в стилях - вместо .modal-wrapper .open { должно быть .modal-wrapper.open {.

array_merge(...$arr)

• Обрабатываете не то событие - должно быть blur, а не focus
  
• Пытаетесь вызвать toUpperCase не у строки, а у массива - забыто [0]
  
• Возвращаете результат в никуда, вместо того, чтобы установить значение инпута
  

И вообще, всё это делается гораздо короче:

input.addEventListener('blur', function() {
  const value = this.value.trim();
  if (value) {
    this.value = value
      .split(/\s+/)
      .map(n => n[0].toUpperCase() + n.slice(1))
      .join(' ');
  }
});

// или

input.addEventListener('blur', ({ target: t }) => {
  t.value = t.value
    .trim()
    .replace(/\s+/g, ' ')
    .replace(/(^|\s)\S/g, m => m.toUpperCase());
});

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

created() {
  accessAPI().then(result => this.api = result);
},

<imgMap :api="api"></imgMap>

Если в дочерний компонент не должны передаваться пустые данные, не надо его рендерить, пока данные не будут получены:

<imgMap v-if="api" :api="api"></imgMap>

v-for="i in num", где num - это ваше число

const getPrimitiveProps = (obj) =>
  Object.entries(obj).reduce((acc, [ k, v ]) => ({
    ...acc,
    ...(v instanceof Object ? getPrimitiveProps(v) : { [k]: v }),
  }), {});

или

const getPrimitiveProps = (obj) =>
  Object.assign({}, ...Object.entries(obj).map(([ k, v ]) =>
    v instanceof Object ? getPrimitiveProps(v) : { [k]: v }
  ));

document.addEventListener('keydown', e => {
  if (e.key === 'Backspace' && e.target !== display) {
    display.value = display.value.slice(0, -1);
    // или
    display.value = display.value.substring(0, display.value.length - 1);
    // или
    display.value = display.value.replace(/.$/, '');
    // или
    display.value = display.value.match(/.*(?=.$)/);
    // или
    display.value = [...display.value].filter((n, i, a) => -~i < a.length).join('');
  }
});

есть модальное окно-увеличение картинки, нажимая на него, маршрут сбивается

Это вы про

<a
     :id="item.id"
     v-b-modal="'img-'+item.id"
     href="#"
>

??

Попробуйте при клике блокировать действие по умолчанию: @click.prevent.

<button v-if="checkedNames.length">click me</button>

watch или обработка события input

$(document).click(function(e) {
  if (!$panel.has(e.target).length && $panel.hasClass('visible')) {
    hidePanel();
  }
});

Если подумать, то регулярные выражения тут не нужны:

const ip = str.split(':', 1)[0];

Если подумать ещё, то всё равно не нужны:

const ip = str.slice(0, str.indexOf(':'));

Но если очень хочется, то можно так:

const ip = str.match(/[\d.]+/).pop();

Или так:

const ip = str.replace(/:.+$/, '');

И даже так тоже можно:

const [ ip ] = /.+(?=:)/.exec(str);

Разным элементам назначаете разный animation-delay, а для "задержки" указываете в keyframes промежуток без изменения значения:

<div class="wrapper">
  <div class="block">hello, world!!</div>
  <div class="block">fuck the world</div>
  <div class="block">fuck everything</div>
</div>

.wrapper {
  width: 150px;
  height: 20px;
  font-size: 16px;
  border: 1px solid #000;
  overflow: hidden;
  position: relative;
}

@keyframes movingTopToBottom {
  0% {
    top: 55px;
  }
  40%, 60% {
    top: 0px;
  }
  100% {
    top: -55px;
  }
}

.block {
  animation: movingTopToBottom 6s linear infinite;
  position: absolute;
}

.block:nth-child(1) { animation-delay:  0s; }
.block:nth-child(2) { animation-delay: -4s; }
.block:nth-child(3) { animation-delay: -2s; }

Чё-то вы не то делаете, как мне кажется. Попробуйте так:

@focus="disabled = true"
@blur="disabled = false"
@mousedown="disabled = !disabled"

А обработчики keyup и click уберите.

Метаданные пусть будут массивом объектов, содержащих два свойства: имя компонента и объект с параметрами:

formMeta: [
  { type: '...', props: { ... } },
  { type: '...', props: { ... } },
  ....
],

<div v-for="{ type, props } in formMeta" class="form-item">
  <component :is="type" v-bind="props"></component>
</div>

https://jsfiddle.net/toLc2r59/

fieldset > .ui-checkboxradio-label {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

const plainToNested = (source, target = {}) =>
  Object.entries(source).reduce((acc, [ path, val ]) => {
    const keys = path.split('.');
    const key = keys.pop();
    keys.reduce((p, c) => p[c] = p[c] || {}, acc)[key] = val;
    return acc;
  }, target);

arr.lenght

Вот же позорище.

arr[x].lenght

Два раза позорище.

Слова lenght нет. Есть length. Подобные опечатки могли бы и сами обнаружить.

firstname, lastname = (fullname.split() + [''])[:2]