0xD34F

А что значит "нормальные"? Вот это - оно нормальное? Или это. Или вот ещё. Или... выбирайте сами.

В документацию заглядывать не пробовали?

<li v-for="(val, key) in data" :some-data="key">{{ val }}</li>

Ну, косяк где-то в компоненте. Если обновить версию material-ui, всё будет OK.

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

Обновить не вариант, в проекте этот юзается(
Слишком много надо будет переписывать

Обновляйте не до последней версии тогда. Если верить чейнджлогу, этот баг был исправлен в версии 1.0.0-beta.22 (в вашем примере предыдущая, так что думаю, особых проблем не будет).

в консоль выводится два значения, причём непонятно каким образом сформированные

Я вижу правильное выполнение так: <бла-бла-бла>

Вместо того, чтобы фантазировать, как оно там должно быть - следует читать документацию.

Открываем, читаем:

When all observables complete, emit the last emitted value from each.

Последнее значение из каждого. Ну и всё.

const result = Array(arr.length);
for (let i = 0; i < arr.length; i++) {
  result[i] = arr[i][0] || '';
}

// или

const result = [];
for (const [ n = '' ] of arr) {
  result.push(n);
}

// или

const result = [];
while (result.length < arr.length) {
  result[result.length] = arr[result.length].slice(0, 1);
}

// или

const result = arr.map(n => n.charAt(0));

Пытаясь удалить класс, вы зачем-то указываете точку в начале его имени.

Непонятно, зачем нужны отдельные классы для каждого типа input'ов. Достаточно одного общего:

#exampleModal {
  .form-group {
    display: none;

    &.active {
      display: block;
    }
  }
}

Закрытие диалога может происходить не только по нажатию на кнопки в футере и хедере, а ещё и по нажатию на оверлей - этот случай вы не обрабатываете. Обработчик закрытия вы назначаете при каждом открытии диалога, т.е., открыли диалог 10 раз - у кнопки будет 10 обработчиков.

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

$('#exampleModal').on({
  'show.bs.modal'(e) {
    const recipient = e.relatedTarget.dataset.whatever;

    $('.modal-title, button[type="submit"]', this).text(`Add ${recipient} in system`);
    $(`.${recipient}`, this).addClass('active');
  },
  'hide.bs.modal'() {
    $('.form-group.active', this).removeClass('active');
  },
});

Или, другой вариант - при открытии диалога скрывать все input'ы перед показом нужных:

$('#exampleModal').on('show.bs.modal', function(e) {
  const recipient = e.relatedTarget.dataset.whatever;

  $('.modal-title, button[type="submit"]', this).text(`Add ${recipient} in system`);
  $('.form-group', this).removeClass('active').filter(`.${recipient}`).addClass('active');
});

Косяк, не относящийся к проблеме, но упомянуть стоит - одинаковые id у input'ов. Во-первых, id должны быть уникальны, в этом как бы и есть их смысл. Во-вторых, при одинаковых id клик по любому label'у вместо соответствующего ему input'а устанавливает фокус на первый с таким id.

Исправленный вариант можно глянуть здесь.

О каких label'ах и каком select'е идёт речь:

const labels = document.querySelectorAll('#price_block .change_model_iphone .item label');
const select = document.querySelector('#select_model');

Как получить for:

const getFor = el => el.getAttribute('for');
// или
const getFor = el => el.attributes.for.value;
// или
const getFor = el => el.htmlFor;

Заполняем select option'ами:

// можно перезаписать разметку
select.innerHTML = Array
  .from(labels, n => `<option value="${getFor(n)}">iPhone ${n.innerText}</option>`)
  .join('');

// или, напрямую создавать новые элементы
select.append(...Array.prototype.map.call(
  labels,
  n => new Option(`iPhone ${n.textContent}`, getFor(n))
));

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

<select></select>

const texts = document.querySelectorAll('.text');
const select = document.querySelector('select');

select.append(...Array.from(texts, n => new Option(n.textContent)));
select.value = null;

select.addEventListener('change', ({ target: { selectedIndex } }) => {
  texts.forEach((n, i) => n.classList.toggle('active', i === selectedIndex));
});

О каком select'е и каких радиокнопках идёт речь:

const select = document.querySelector('[name="select_model"]');
const radios = document.querySelectorAll('[name="model"]');

Обновляем состояние радиокнопок при выборе значения в select'е:

select.addEventListener('change', ({ target: { value } }) => {
  Array.prototype.find.call(radios, n => n.value === value).checked = true;
});

И наоборот:

radios.forEach(function(n) {
  n.addEventListener('change', this);
}, e => select.value = e.target.value);

В компоненте так же прописано удаление "EventListener", но так как компонент сохраняет своё состояние (keep-alive), данный метод не удаляет "слушателя скролла".

Как подсказывает документация, для keep-alive компонентов доступны хуки activated и deactivated - попробуйте вешать и снимать обработчик скролла в них.

const
  overlay = document.getElementById('overlay'),
  delay_open = 5000,
  delay_close = 10000;

setTimeout(function() {
  overlay.style.display = 'block';
  setTimeout(function() {
    overlay.style.display = 'none';
  }, delay_close);
}, delay_open);

Надо внутри цикла заменить translate на rotate. И не забыть сделать translate перед циклом - это чтобы круг был виден целиком. Типа так:

<canvas width="400" height="400"></canvas>

const canvas = document.querySelector('canvas');
const w = canvas.width;
const h = canvas.height;
const ctx = canvas.getContext('2d');

ctx.translate(w / 2, h / 2);
ctx.fillStyle = 'red';

const steps = 30;

for (let i = 0; i < steps; i++) {
  ctx.beginPath();
  ctx.arc(w / 4, h / 4, 5, 0, 2 * Math.PI, false);
  ctx.rotate(2 * Math.PI / steps);
  ctx.fill();
  ctx.closePath();
}

Что надо убрать: const classPrefix = 'toggle-';.

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

// вариант попроще - хватаем всё, что содержит указанную подстроку; так можно нарваться
// на выполнение бессмысленной работы, будут отобраны элементы, у которых ничего
// не будет удалено - это если подстрока находится не в начале класса, например xxx-toggle-xxx
const elements = document.querySelectorAll(`[class*="${classPrefix}"]`);

// вариант посложнее, поуродливее, но без обработки лишнего - хватаем элементы,
// у которых класс начинается с указанной подстроки, или содержит указанную подстроку,
// а перед ней ещё есть пробел
const elements = document.querySelectorAll(`[class^="${classPrefix}"], [class*=" ${classPrefix}"]`);

Убираем:

const reg = RegExp(`(^|\\s)${classPrefix}`);
elements.forEach(n => n.className = n.className.split(reg).join(' ').trim());

// или

elements.forEach(function(n) {
  n.classList.value = n.classList.value.replace(this, '$1');
}, RegExp(`(^| )${classPrefix}`, 'g'));

// или

for (const { classList: cl } of elements) {
  for (const n of [...cl]) {
    if (n.startsWith(classPrefix)) {
      cl.remove(n);
      cl.add(n.slice(classPrefix.length));
    }
  }
}

Если бы вы составили себе труд ознакомиться с документацией, то знали бы, что для игнорирования содержимого инпута надо при вызове метода search указать значение. В вашем случае, раз хотите получать полный список - передавайте пустую строку:

$('#searchSity').autocomplete('search', '');

выводить содержимое данного тега в консоль...

Вешаем на элемент списка обработчик клика, которому передаём соответствующий элемент массива данных. Внутри обработчика выполняем нужные действия:

<li v-for="n in items" @click="onClick(n)">
  {{ n.message }}
</li>

methods: {
  onClick(item) {
    console.log(item.message);
  }
}

...или в какой-то блок

Пусть этот блок будет расположен за пределами компонента. По клику генерируете событие, дополнительным аргументом передаём элемент массива данных:

<li v-for="n in items" @click="$emit('select', n)">
  {{ n.message }}
</li>

В родительском компоненте подписываемся на это событие, сохраняем полученные данные в свойство компонента, выводим их:

<b-list @select="selected = $event"></b-list>
<div v-if="selected">{{ selected.message }}</div>

data: () => ({
  selected: null,
  ...
})

Похоже на то, что вам нужно?

Vue не может отследить прямую установку значения элемента массива по индексу. Так что замените

shower[index] = !shower[index]

на

$set(shower, index, !shower[index])

А ещё лучше - уберите массив shower и добавьте элементам items свойство show:

data: () => ({
  items: [
    { name: '...', show: false },
    { name: '...', show: false },
    ...
  ],
  ...
}),

<span @click="item.show = !item.show">{{ item.name }}</span>
<div class="dialog_show" v-if="item.show">{{ index }}</div>

$('.nameClass\\.')

Получаем массив значений, вырезаем из него подмассив нужной длины:

const getValues = (obj, count) =>
  count > 0
    ? Object.values(obj).slice(0, count)
    : [];

Или, перебираем имена свойств, сохраняем значения собственных, как наберётся сколько надо, прерываем цикл:

function getValues(obj, count) {
  const result = [];

  for (const k in obj) {
    if (result.length >= count) {
      break;
    } else if (obj.hasOwnProperty(k)) {
      result.push(obj[k]);
    }
  }

  return result;
}

Так вы уже почти всё сделали сами... просто передавайте в кнопку isSelected, типа так.

Достаёте из объекта события координаты, по которым был сделан клик, передаёте их в document.elementsFromPoint. Из полученного массива достаёте элемент под индексом 1 (0 - это сам кликнутый элемент).

https://jsfiddle.net/6prekj29/