0xD34F

Проблема не localStorage, а в том, что вы не до конца понимаете, как работает метод index. Если вызывать его без аргументов, то будет возвращён индекс элемента относительно его соседей. А вовсе не на странице в целом, как вам сейчас кажется.

Какие есть варианты решения вашей проблемы:

• Собирать индексы на всех уровнях вложенности, вместо одного числа будете хранить массив
  
• Вместо индексов использовать id (лично мне это видится наиболее предпочтительным вариантом - при изменении структуры меню информация о выбранном пункте останется корректной)
  
• Ну и наконец, самый лёгкий и простой способ - воспользоваться методом index соответственно вашей задумке, замените $(this).index() на $('.sub3').index(this) (за подробностями - в документацию)
  

<tr *ngFor="let monitoring of filteredMonitorings ">
    <td style="text-align: center">{{ getTotal(filteredMonitorings) }} </td>
</tr>

Здесь вы обходите массив, и на каждом шаге суммируете все его элементы. Конечно, результаты будут одинаковыми.

Если надо выводить отдельные элементы, то вместо общей суммы надо показывать значение из текущего объекта:

<tr *ngFor="let monitoring of filteredMonitorings ">
  <td style="text-align: center">{{ monitoring.count }} </td>
</tr>

Если надо вывести сумму - избавьтесь от ngFor:

<tr>
  <td style="text-align: center">{{ getTotal(filteredMonitorings) }} </td>
</tr>

Во-первых - обходите не те блоки. Вместо .counter-block (он же у вас всего один) должно быть .product-count.

Во-вторых - работая с конкретным блоком, вместо поиска элементов только внутри него, вы обшариваете всю страницу.

А почему бы не сделать массив доступных языков:

languages: [ 'en', 'ru' ]

И не обойти его с помощью v-for:

<ul>
  <li
    v-for="lang in languages"
    @click="selected = lang"
  >
    {{ lang }}
  </li>
</ul>

??

Сначала загружаете данные пользователя, а затем инициализируете приложение:

store.dispatch('заргузитьДанныеПользователя').then(() => {
  new Vue({ ... });
});

Или, в компоненте:

created() {
  this.$store.dispatch('заргузитьДанныеПользователя');
},

<div v-if="$store.state.данныеПользователя">
  контент
</div>
<индикатор-загрузки v-else />

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

Честно говоря, совсем не понимаю, в чём тут проблема. Если входные данные - это id пользователя, с которым ведётся переписка, то почему бы не допустить хранение переписки сразу с несколькими пользователями: объект, ключи которого - id пользователей, значения - соответствующие сообщения. Делать watch на активного пользователя - при изменении проверять, если такого в объекте ещё нет, запрашивать его сообщения (код из created вынести в отдельный метод, чтобы можно было использовать и в created и в watcher'е).

Элементы с float не влияют на высоту родительского элемента, а других внутри у .div_info у вас нет - так что его высота равна нулю. А поскольку сам .div_info является единственным дочерним элементом .midd_wrap - то и последний также имеет нулевую высоту. Т.е., бэкграунд на самом деле есть, просто вы его не видите.

Документацию-то открывать пробовали? Там пишут, что будто бы для задания новой конечной даты достаточно просто выполнить инициализацию ещё раз. Соответственно, внутрь if (event.elapsed) {} вставляете $(this).countdown(а здесь новая дата);.

Ну, поскольку стили вы назначаете с помощью метода css, они попадают в атрибут style. А значит - достаточно просто получить его значение, типа так. Или, можно не переприсваивать объект со стилями, а дополнять его - тогда можно воспользоваться JSON.stringify, типа так.

if( slideIndex > sliderItem.length ) {

Да ну? Вы что, действительно не знаете, что массивы индексируются начиная с нуля? Не будет sliderItem.length корректным значением, элемента с таким индексом уже нет. Замените > на ===.

Нормальное ли разделение компонентов

Вы бы показали что-нибудь более законченное... У вас там всего лишь 85 строк кода, а вы волнуетесь, хорошо ли компоненты выглядят. СЕРЬЁЗНО??!

правильно ли делать такие передачи props??

Сомнительно. Зачем вручную возиться с четырьмя значениями? Вдруг завтра надо будет сделать 5 или 8 или 23 - так и будете копипастить? Кладёте их в отдельный объект и работаете уже с этим объектом, типа так.

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

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

<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 = arr.map(n => n.charAt());

// или

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

// или

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

// или

const result = [];
for (let i, n; (n = arr[i = result.length]) != null;) {
  result.splice(i, 0, n.replace(/(.).+/, '$1'));
}

// или

const result = (function get(i, n = arr[i]) {
  return n != null ? [ n.slice(0, 1), ...get(-~i) ] : [];
})(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);