Пара вариантов:
1. Через z-index вывести footer/header выше затемения
2. Установить высоту затемнения как: height: calc(100vh - XYpx) - где XY - сумма высот header и footer.
У вас две точки входа в вэбпаке. Соответственно, когда вебпак разрешает зависимости, он создаст два файла на выходе, которые вы подключаете видимо уже на страницу. Эти файлы независимы, в каждом свой экземпляр вью и свой экземпляр сторы, они никак не взаимодействуют и не видят друг друга.
Слишком абстрактные вопросы. Сделайте с вашей вёрсткой и оцените производительность. Целиком перерисовываться ничего не будет. У каждой подобной библиотеки свои механизмы улучшения производительности. В варианте с вью, у вас скорее всего произойдёт просто добавление в список одного элемента и сравнение других элементов на изменение. И далее перерисовка того, что изменилось.
Не стоит в этом файле использовать эту конструкцию, т.к. по сути у вас это клиент для работы по сети. Возвращайте данные из клиента в компонент и уже в нем выполняйте необходимые действия.
Очевидно, что когда роутер вас перемещает на тот же компонент с которого он хочет уйти он не пересоздает этот компонент, соответственно, данные события не вызываются.