我是Vue的新手，我正在处理一个项目，在这个项目中，我需要根据一个布尔值来显示不同的组件，该布尔值显示用户是否登录。

<template>
    <div class="container-fluid" v-if="isUserLoggedIn">
      <main-navigation/>
      <router-view />
      <MainFooter />
    </div>
    <div v-else>
      <router-view />
    </div>
  </template>

<script>
import { defineComponent } from "vue";
import MainNavigation from "./MainNavigation.vue";
import MainFooter from "../../common/MainFooter.vue";

export default defineComponent({
  components: {
    MainNavigation,
    MainFooter,
  },
});
</script>

<script setup>
import { useAuthMethod } from "../../../auth/Auth";
import { computed } from "vue";

const auth = await useAuthMethod();
const isUserLoggedIn = computed(() => auth.isUserLoggedIn());
</script>

在上面的代码中，auth.isUserLoggedIn（）返回一个布尔值，指示用户是否登录。我的问题是我定义的“isUserLoggedIn”常量没有自动更新，或者说没有自动计算布尔值并相应地更新呈现的组件。我不确定这是否是正确的方法，所以请告诉我正确的方法。
我也尝试从Computed中删除“isUserLoggedIn”，但没有用，组件不会自动更新。