Изображение не меняется динамически с помощью кнопки включения/выключения света на веб-сайте

Я пытаюсь динамически изменить изображение (дневное изображение или ночное изображение), когда человек нажимает кнопку света. Это работает, но мне нужно обновить страницу, чтобы отобразилось изображение. Дневное и ночное время — это, по сути, просто логические значения «истина» или «ложь» для моей переменной темы.

Я попробовал закодировать это следующим образом:

использовать Theme.js:

import { ref, watchEffect } from 'vue';

export default function useTheme() {
    const theme = ref(JSON.parse(localStorage.getItem('theme') || 'false'));

    watchEffect(() => {
        localStorage.setItem('theme', String(theme.value));
    });

    return { theme };
}

App.vue:

const { theme } = useTheme(); // Access the shared state.

const toggleTheme = () => {
  theme.value = !theme.value;
  document.body.classList.toggle('dark-theme', theme.value);
  localStorage.setItem('theme', JSON.stringify(theme.value));
}

Home.vue (где возникает проблема):

• Часть HTML:

<img :src = "banner" alt = "Daytime Banner">

• Расчет дневного и ночного времени:

import DayTimeBanner from "@/assets/banner-city-daytime.png";
import NightTimeBanner from "@/assets/banner-city-nighttime.png";
...
const { theme } = useTheme(); // Access the same shared state.

const banner = computed(() => theme.value ? NightTimeBanner : DayTimeBanner);

Любая подсказка о том, что может происходить? Изменения фона темы являются реактивными, но для баннера мне приходится обновить страницу, чтобы изображение появилось.