Разрыв макета при использовании однофунцевого микро-интерфейса с vue и reactjs

Question

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

для тех, кто не знает, что такое одно-спа, вы можете прочитать здесь: https://single-spa.js.org/docs/examples

это мои регистрационные приложения:

import { registerApplication, start } from "single-spa";
import * as isActive from "./activity-functions";

registerApplication(
  "@vue-mf/vue-navbar",
  () => System.import("@vue-mf/vue-navbar"),
  isActive.vueNavbar
);

registerApplication(
  "@vue-mf/rate-dogs",
  () => System.import("@vue-mf/rate-dogs"),
  isActive.vueComponent
);

registerApplication(
  "@react-mf/people",
  () => System.import("@react-mf/people"),
  isActive.reactComponent
);

registerApplication(
  "@vue-mf/vue-footer",
  () => System.import("@vue-mf/vue-footer"),
  isActive.vueFooter
);

start();

и это моя функция активности:

export function prefix(location, ...prefixes) {
  return prefixes.some(
    prefix => location.href.indexOf(`${location.origin}/${prefix}`) !== -1
  );
}

export function vueNavbar(location) {
  // The navbar is always active
  return true;
}

export function vueComponent(location) {
  return prefix(location, "rate-doggos");
}

export function reactComponent(location) {
  return prefix(location, "people");
}

export function vueFooter(location) {
  // The footer is always active
  return true;
}

для лучшей визуализации, это пример разметки:

Я пользуюсь спа-салоном с vue & react

Может кто-нибудь помочь мне решить это? Я очень запутался в этом разрыве макета