Functions from @vueuse not working

[carpad88]

Hi there,

I'm trying to use some functions from @vueuse on a fresh install with this template, but it seems something is not working well.

For example, the button icon for dark mode doesn't change after clicking it but is strange because the theme actually does.

Also, I tried to use the function useMouse() and the position of the mouse doesn't get update on the template.

vueuse-notworking.mov

The code I'm using is this:

<template>
  <main py-40 px-20 text-center>
    <img w-16 inline-block src="/nuxt.svg" />
    <img w-16 inline-block src="/vite.svg" />
    <h1 mt-1 mb-3 text-2xl cursor-default>
      <span text-green-500 hover:text-white hover:bg-green-600>Nuxt Bridge</span>
      <span text-gray-400 mx-2>+</span>
      <span text-purple-500>Vitesse</span>
    </h1>
    <Counter />
    <div class="text-2xl m-3 text-gray-500 flex justify-center gap-3">
      <a href="https://github.com/antfu/vitesse-nuxt-bridge" target="__blank">
        <div class="i-carbon-campsite" />
      </a>
      <DarkToggle />
    </div>
    <div>
      <pre>
        {{ mouse }}
      </pre>
    </div>
  </main>
</template>

<script setup lang="ts">
import { reactive } from 'vue-demi'

const mouse = reactive(useMouse())
</script>