Vue 3 class attribute appears to ignore ref

I'm super lost. The watch is getting hit when the currentPresetName changes and isDarkMode is getting updated. For whatever reason, it seems as though :class is completely ignoring my ref. It checks it on the initial load and then never reacts.

<script setup lang="ts">
import { ref, watch } from "vue";
import { useColors } from "vuestic-ui";

const { currentPresetName } = useColors();

const isDarkMode = ref();

watch(currentPresetName, () => {
  isDarkMode.value = currentPresetName.value === 'dark';
})
</script>
<template>
  <div :class="['homeBackground', isDarkMode ? 'backgroundDark' : '']" v-once></div>
</template>
<style lang="scss" >
.homeBackground {
  height: 93vh;
  background-image: url('@/assets/LargeLogo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40vw;
  background-color: unset !important;
}

.backgroundDark {
  background-image: url('@/assets/LargeLogo-Dark.png');

}
</style>

Remove v-once and it will work as expected. The "bug" is a feature. It's what v-once does:

> On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.

First you don't need an intermediate ref isDarkMode. Like don't clutter code with variables that used only once on the next line and initialized with a couple of words.

Second use watch only if you mutate data, for derived calculated values like isDarkMode use computed.

Third move your static homeBackground class to class static attribute so it would be obvious which classes are static and which ones are dynamic.

And the last but the most important:
try to remove v-once since currentPresetName could change to the needed dark value after the first rendering of the element.

JS expressions inside a template are computed so try:

<div class="homeBackground" :class="{backgroundDark: currentPresetName === 'dark'}"></div>