0xD34F

Заменить id на data-атрибут:

$('[data-index]').click(function() {
  $('#main__display').html(`<img src="${collect[this.dataset.index]}">`);
});

или

document.querySelectorAll('[data-index]').forEach(function(n) {
  n.addEventListener('click', this);
}, function(e) {
  this.innerHTML = `<img src="${collect[e.currentTarget.dataset.index]}">`;
}.bind(document.querySelector('#main__display')));

Очень просто:

const THICKNESS = {
  thinLine: 1,
  get midLine() {
    return this.thinLine * 2;
  },
  get boldLine() {
    return this.thinLine * 4;
  },
};

после 21 итерации выдает неправильное значение даты

Правильное. Что написали - то и получаете.

Вы пляшете от 11 числа, а в августе 31 день. 11 + 21 = 32, такого числа нет, так что месяц изменяется на сентябрь. Дальше 11 + 22, а дата-то после предыдущей итерации цикла сентябрьская. Так что получить вы пытаетесь 33 уже не августа, а сентября. Такой даты тоже не бывает, месяц меняется на октябрь. Ну и так далее - на каждой итерации прыгаете на месяц с лишним вперёд.

Как избавиться от лишнего перехода к следующему месяцу?

Первый вариант - устанавливать в качестве числа месяца не стартовое значение + счётчик цикла, а текущее + 1:

const startDate = new Date(2019, 7, 11);
const currentDate = new Date(startDate);

for (let i = 0; i <= 30; i++) {  
  currentDate.setDate(currentDate.getDate() + 1);
  console.log(currentDate);
}

Второй вариант - создавать на каждой итерации цикла новый объект даты вместо изменения уже существующего:

const startDate = new Date(2019, 7, 11);

for (let i = 0; i <= 30; i++) {  
  const currentDate = new Date(startDate);
  currentDate.setDate(startDate.getDate() + i);
  console.log(currentDate);
}

Потому что input всё ещё disabled в тот момент, когда вы дёргаете focus. Используйте nextTick:

this.isDisabled = false;
this.$nextTick(() => this.$refs.headerBoardName.focus());

А есть где их отображать? Не забыли добавить router-view в FoodItems?

Vue.set(this.response.order.ordersItemsInfo[id], 'ordersItemsPropertiesInfo', [])

потому что

data: () => ({
  items: [ 'active1', 'active2', 'active3' ],
  active: false,
}),

<button @click="active = !active"></button>
...
<div v-for="n in items" :class="{ [n]: active }"></div>

function createList(data) {
  const list = document.createElement('ul');
  const stack = [];
  let level = +data[0].match(/\d+/);
  let ul = list;

  for (const n of data) {
    const currLevel = +n.match(/\d+/);
    if (currLevel > level) {
      stack.push([ ul, level ]);
      [ ul, level ] = [ document.createElement('ul'), currLevel ];
      stack[stack.length - 1][0].lastElementChild.append(ul);
    } else {
      for (; currLevel !== level; [ ul, level ] = stack.pop()) ;
    }

    ul.insertAdjacentHTML('beforeend', `<li>${n}</li>`);
  }

  return list;
}

https://jsfiddle.net/trovkp31/

const xxx = (f, ...args) => f.apply(null, args);

xxx(console.log, 'aaa', 'bbb', 'ccc')
xxx(alert, 'hello, world!!')
xxx((...args) => args.reduce((p, c) => p * c, 1), 3, 4, 5)
xxx(xxx, Math.max, 6, 3, 8, 1, 2)

[(ngModel)]="timeFrom"

??

Если не хотите, чтобы showWorks вызывалась, то отменять всплытие надо не в ней, а ниже. Цепляйте ещё один обработчик onTransitionEnd - к той ReactCSSTransitionGroup, чьи события не хотите обрабатывать.

Почему не выезжает? Наверное потому, что корневой компонент, и компонент в котором находится меню - это разные компоненты, не там устанавливаете значение свойства isLeftMenuShowed.

В целом - дичь дикая, $root.$on, зачем так, кто вам такое посоветовал? Говорите, что меню и компонент с кнопкой соседи - ну так осуществляйте их взаимодействие через родителя, например.

await setTimeout

Бессмысленная операция, setTimeout не возвращает Promise, эвейтить тут нечего.

Если хотите использовать await вместе с setTimeout, последний придётся явно завернуть в Promise:

await new Promise(r => setTimeout(r, 1000))

Кроме того, надо возвращать результаты выполнения функций, например здесь

.catch((e)=>{this.handleUsersListErrors(e)})

после того, как catch отработает, вызов getUserCheckList завершается, и created продолжает работу, никакого "не позволить продвинуться" не будет (ну и конечно нелишним будет отметить, что хуки жизненного цикла vue синхронны, так что в любом случае не выйдет "приостановить" выполнение created - в том смысле, чтобы асинхронный код выполнился до начала монтирования экземпляра компонента).

UPD. Держите пример того, как может выглядеть реализация подобной схемы (в роли "запроса" выступает генерация случайного числа, успешным результатом считается число, попадающее в верхние 10% заданного интервала):

data: () => ({
  status: 'unknown',
  val: 'empty',
}),
methods: {
  getVal() {
    this.status = 'awaiting request answer';
    return new Promise((...r) => {
      setTimeout(() => {
        const max = 10000;
        this.val = Math.random() * max | 0;
        r[+(this.val < max * 0.9)]();
      }, 1000);
    }).catch(this.handleError);
  },
  handleError() {
    this.status = 'ERROR, awaiting new request';
    return new Promise(r => setTimeout(r, 2000)).then(this.getVal);
  },
},
async created() {
  await this.getVal();
  this.status = 'OK';
},

<div>status: {{ status }}</div>
<div>value: {{ val }}</div>

изучаю метод фильтр

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

greater than or equal to 8.0

, а в вашем коде мы видим

rating > 8

Ещё сказано, что следует использовать

combination of filter and map

, а в вашем коде только filter.

watchList.filter(n => n.imdbRating >= 8).map(n => ({ title: n.Title, rating: n.imdbRating }))

// или

watchList.reduce((acc, { Title: title, imdbRating: rating }) => (
  rating < 8 || acc.push({ title, rating }),
  acc
), [])

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

https://jsfiddle.net/cfLk1jdu/

<div id="app"></div>

function App() {
  const [ dark, setDark ] = React.useState(null);
  const updateDark = e => setDark(e.type === 'mouseover' ? e.currentTarget.id : null);

  return (
    <React.Fragment>
      {[ 'left', 'right' ].map(n => (
        <div
          id={n}
          key={n}
          onMouseOver={updateDark}
          onMouseLeave={updateDark}
          className={dark && dark !== n ? 'dark' : ''}
        ></div>
      ))}
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

Добавляете изображениям классы, которые будут обозначать категории, к которым изображения относятся. Кнопкам добавляете атрибут, значение которого будет совпадать с именем одного из классов (кроме кнопки, которая должна показать всё - там будет класс, общий для всех изображений). При клике на кнопку получаете значение атрибута и обходите изображения - у кого соответствующий класс есть, тех показываете, иначе прячете. Например.

Или, можно переключаться между изображениями без js. Опять же, добавляете изображениям классы, обозначающие категории. Делаете скрытые радиокнопки, id которых соответствуют категориям. После них располагаете связанные с ними лейблы (будут выступать в роли кнопок) и изображения. С помощью :checked, subsequent-sibling combinator и :not стилизуете лейблы и прячете изображения, у которых отсутствует класс выбранной категории. Вот как-то так.

Потому что в html далеко не всякий тэг может быть самозакрывающимся, и если не может, а вы его так оформили, то он рассматривается браузером как открывающий, и всё, что следует за ним, попадает внутрь элемента. То есть, у вас элемент app имеет дочерний элемент designer, у него тоже есть дочерний элемент - higlighter, у которого внутри context-menu. В таком виде ваш шаблон попадает к Vue.

Так что закрывайте тэги, или вместо dom-шаблона используйте что-нибудь другое - свойство template, render-функция, однофайловые компоненты.