How to get my body to change to green when drawer is open ?

<script setup lang="ts">
const runtime = useAppConfig();

const publicDrawer = useState<boolean | undefined | null>("publicDrawer")

useHead({
  meta: [
    { name: "theme-color", content: runtime.theme.colors.primary },
    { name: "site-name", content: runtime.title },
    { name: "title", content: runtime.title },
  ],
  bodyAttrs: {
      class: publicDrawer ? "bg-red-900" : "bg-green-900",
  },
});
</script>

<script setup lang="ts">
const runtime = useAppConfig();

const publicDrawer = useState<boolean | undefined | null>("publicDrawer")

useHead({
  meta: [
    { name: "theme-color", content: runtime.theme.colors.primary },
    { name: "site-name", content: runtime.title },
    { name: "title", content: runtime.title },
  ],
  bodyAttrs: {
      class: publicDrawer ? "bg-red-900" : "bg-green-900",
  },
});
</script>