0xD34F

Почему не выезжает? Наверное потому, что корневой компонент, и компонент в котором находится меню - это разные компоненты, не там устанавливаете значение свойства 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 }))

Есть свойство 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-функция, однофайловые компоненты.

Так же, как и везде:

stop(e) {
  e.stopPropagation();
}

onTransitionEnd={this.stop}

if (novyna.lenght) {

Что ещё за "lenght"? Я такого слова не знаю. Есть "length".

в процессе экспериментов было установлено, что если написать в условии вообще какую-либо фигню, типа if(novyna.lenght=55), то новости выводятся как ни в чем не бывало

Предлагаю разобраться, чем присваивание отличается от проверки на равенство.

class News extends React.Component {

У этого компонента нет причин быть классом:

const News = ({ news }) =>
  <div className="news">
    {Array.isArray(news) && news.length
      ? news.map(n => (
          <div key={n.id}>
            <p className="news__author">{n.author}:</p>
            <p className="news__text">{n.text}</p>
            <hr/>
          </div>
        ))
      : <p>Нет</p>}
    <strong>Всего новостей: {news.length}</strong>
  </div>;

isBarMenuClicked: false, // эту переменную нужно передать

Не нужно. Зачем кнопке знать о состоянии меню? - её дело нажиматься и оповещать об этом того, кто находится выше. Делайте по клику $emit('click'), подписывайтесь на событие в родительском компоненте, переключайте там значение переменной, отвечающей за открытость меню и передавайте её в меню как параметр.

Потому что выходите из функции, как только первое событие будет найдено.

Вы вообще как, понимаете, что делает return?

Уверен, можно написать всё короче раза в три, чем есть сейчас, но разбирать ваш код... Вряд ли кто-то тут на такое сподобится, просто заставим его работать ожидаемым образом. Добавляете метку перед внешним циклом, и объявляете массив, в который будете складывать события. Должно стать так:

const events = [];

collectEvents:
for(let z = 0; z < arrOfEvents.length; z++){

Все return memo заменяете на

events.push(memo);
continue collectEvents;

После внешнего цикла добавляете return events;.

.one path {
  fill: #909090;
}
.one.active path {
  fill: #f00;
}

const itemSelector = '.one';
const activeClass = 'active';

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(itemSelector)) && t.classList.toggle(activeClass)
);

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.currentTarget.classList.toggle(activeClass));

https://jsfiddle.net/zw4k6vsu/

Хранилище:

state: {
  date: null,
  interval: null,
},
mutations: {
  update(state) {
    state.date = new Date();
  },
  start(state) {
    if (!state.interval) {
      state.interval = setInterval(this.commit, 1000, 'update');
    }
  },
  stop(state) {
    if (state.interval) {
      clearInterval(state.interval);
      state.interval = null;
    }
  },
},

Компонент:

computed: {
  timerActive() {
    return !!this.$store.state.interval;
  },
  timeStr() {
    const { date } = this.$store.state;
    return date instanceof Date
      ? [ 'getHours', 'getMinutes', 'getSeconds' ]
          .map(n => `${date[n]()}`.padStart(2, 0))
          .join(':')
      : 'ВРЕМЕНИ НЕТ';
  },
},
created() {
  this.$store.commit('start');
},

<button @click="$store.commit('start')" :disabled="timerActive">start</button>
<button @click="$store.commit('stop')" :disabled="!timerActive">stop</button>
<div>{{ timeStr }}</div>

Разделить компонент на два - для списка и выбранного элемента. Данные передавать в список, из списка эмитить выбранный элемент, который передавать в соответствующий компонент.

https://jsfiddle.net/5kdqema2/

v-on="условие ? { событие: обработчик } : {}"

или (но так vue будет кидать предупреждение, что обработчик "invalid")

v-on="{ событие: условие ? обработчик : null }"

const result = arrs.reduce(
  (acc, arr) => (arr.forEach((n, i) => acc[i].push(...n.slice(acc[i].length))), acc),
  Array.from({ length: Math.max(...arrs.map(arr => arr.length)) }, () => [])
);

или

const result = arrs.reduce((acc, arr) => (
  arr.forEach((n, i) => (
    acc[i] = acc[i] || [],
    n.forEach((m, j) => acc[i][j] = acc[i][j] || m)
  )),
  acc
), []);

хочу, чтобы модальное окно отображалось столько раз, сколько событий в дне, и каждый раз с подробной информацией о новом событии

То есть, на день назначено десять событий, пользователь случайно ткнулся в этот день, и чтобы продолжить работу, ему надо будет десять окон прокликать? Круто. Предусмотрите хотя бы возможность закрыть сразу всё.

Вместо свойства detailInformationOfEvent сделайте detailInformationOfEvents (то же самое, но во множественном числе) - массив. Само свойство detailInformationOfEvent станет вычисляемым:

computed: {
  detailInformationOfEvent() {
    return this.detailInformationOfEvents[0];
  },
  ...

Когда в detailEvent собираете события для показа в окне - вместо присваивания будет добавление в массив:

this.detailInformationOfEvents.push({
  ...
});

Условие показа окна - вырезаете modalWindowDetail, вместо него будет detailInformationOfEvent (т.е., пока в массиве событий что-то есть - окно показывается):

v-show="detailInformationOfEvent"

Клик по кнопке "Окей" - вместо присваивания будет удаление нулевого элемента массива событий:

detailInformationOfEvents.shift()

https://jsfiddle.net/sjw506rc/

Ну как так-то, а? Можно же было самостоятельно открыть документацию, и прочитать:

Метод Performance.now() возращает временную метку DOMHighResTimeStamp, измеряемую в миллисекундах

Надеюсь, перевести миллисекунды в секунды труда не составит.