0xD34F

Ну как бы так:

const cloud = new Image();
cloud.src = 'https://avatanplus.com/files/resources/mid/56dc1ba4ba1b81534bcbfb9a.png';

(function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save();
  ctx.translate(300, 200);

  const time = new Date();
  ctx.rotate(Math.sin(time / 500) / 10);

  ctx.drawImage(cloud, -300, -200);
  ctx.restore();

  window.requestAnimationFrame(draw);
})();

Коэффициенты для изменения скорости и амплитуды - их вы, думаю, сможете подобрать самостоятельно.

100 * arr.reduce((sum, n) => sum + +n.no_apply, 0) / arr.reduce((sum, n) => sum + +n.count, 0)

locales: ['ru', 'en'],
locale: 'ru',

{{ locales[locale]}}

v-for="(value, key) in locales"

@click.prevent="localizee(key)"

Ничего не смущает? Есть массив языков, есть текущий язык. А работаете вы с текущим языком не как с языком, а как с его индексом - и при выводе в шаблон, и при установке языка. Что это за шизофрения?

Проблема не 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 = 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.

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