Антон Антон

let filteredList = watchList.filter(item => item.imdbRating > 8)
   .map(item => {return {title: item.Title, rating: item.imdbRating}});

или я что-то не понял

А вообще это не челлендж, а основы. Рекомендую почитать обновленный learn.javascript.ru

У меня работает такой код (плавный только там, где есть поддержка scroll behavior, да и фиг с ним) https://gist.github.com/FragsterAt/b72632976cac00f...
Ну и в CSS также scroll-behavior: smooth;
прописан для html, body и т.д.

<script defer src="script.js">

Да. То, что выдается, разруливается правами на объекты у пользователя, под которым вы используете этот самый интерфейс oData.

https://ru.vuejs.org/v2/guide/state-management.htm...

https://router.vuejs.org/ru/guide/essentials/histo...

Как правило в body ответа ошибка 1с описана.
Ну и в IIS уже должно быть что-то типа: Диспетчер служб IIS ‑ <Конкретный сервер> ‑ сайты ‑ ‑ <Имя виртуального приложения> ‑ Страницы ошибок ‑ Изменить параметры… Если сервер обнаружил ошибку, возвратить в значение Подробные сообщения об ошибках.

У вас в коде опечатка, но вообще-то обычно в таком случае сам "дочерний компонент" содержит абсолютно позиционированную подложку на весь экран, показываемую при необходимости (например:

position: absolute; 
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;

) на клик по которой и вешается закрытие всплывающего сдержимого компонента, у самого "всплывающего содержимого" компонента устанавливается нужный z-index, чтобы он не закрывался подложкой.
Чтобы за свои интерфейсные функции компонент отвечал целиком сам.