vuejs3 - Empty Vue 3 reactive object on some pages

Question

I have an object that I want to access from all my web app pages. I am using Vue 3 reactivity but I have noted that in some instances, I have to refresh the page to get the object.

How do I refactor my code to have the object always? See my code below:

import { reactive, watch } from "vue";
import getSchoolDocuments from "../composables/getSchoolDocuments";
import { projectAuth } from "../firebase/config";

let user = projectAuth.currentUser;

let userId;

if (!user) {
  userId = localStorage.getItem("userId");
} else {
  userId = user.uid;
}

const { error: schoolError, documents: schoolDetails } = getSchoolDocuments(
  "schools",
  userId
);

watch(schoolDetails, (newValue, oldValue) => {
  console.log(oldValue);

  school.id = newValue["id"];
  school.name = newValue["name"];
  school.staff = newValue["staff"];
  school.vehicles = newValue["vehicles"];
  school.contacts = newValue["contacts"];
 
});

export const school = reactive({
  id: "",
  name: "",
  staff: "",
  vehicles: "",
  error: schoolError
});

question from:https://stackoverflow.com/questions/65950533/empty-vue-3-reactive-object-on-some-pages

Answer 1

Waitting for answers