diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index ec30974..764ed67 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from "vue";
 import Currency from "../components/Currency.vue"
 import { useBudgetsStore } from "../stores/budget"
 import { useAccountStore } from "../stores/budget-account"
@@ -9,17 +10,17 @@ const props = defineProps<{
   accountid: string,
 }>();
 
-const ExpandMenu = useSettingsStore().Menu.Expand;
+const ExpandMenu = computed(() => useSettingsStore().Menu.Expand);
 
 const budgetStore = useBudgetsStore();
-const CurrentBudgetName = budgetStore.CurrentBudgetName;
-const CurrentBudgetID = budgetStore.CurrentBudgetID;
+const CurrentBudgetName = computed(() => budgetStore.CurrentBudgetName);
+const CurrentBudgetID = computed(() => budgetStore.CurrentBudgetID);
 
 const accountStore = useAccountStore();
-const OnBudgetAccounts = accountStore.OnBudgetAccounts;
-const OffBudgetAccounts = accountStore.OffBudgetAccounts;
-const OnBudgetAccountsBalance = accountStore.OnBudgetAccountsBalance;
-const OffBudgetAccountsBalance = accountStore.OffBudgetAccountsBalance;
+const OnBudgetAccounts = computed(() => accountStore.OnBudgetAccounts);
+const OffBudgetAccounts = computed(() => accountStore.OffBudgetAccounts);
+const OnBudgetAccountsBalance = computed(() => accountStore.OnBudgetAccountsBalance);
+const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBalance);
 </script>
 
 <template>