Pinia not defining stores? | Nuxt | Page 1

I tried defining a Pinia store but it doesnt show in the devtools, nor do the functions work.

devtools: (img)
store:

export const useTransformStore = defineStore('TransformStore', () => {
    
    const chatShown = ref(false);
    const buttonTransform = computed(() => chatShown.value ? 0 : 350);
    
    function toggleChat() {
        chatShown.value = !chatShown.value;
    }
    return {
        toggleChat,
        buttonTransform,
        chatShown
    }
});

nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    postcss: {
        plugins: {
          tailwindcss: {},        //tailwindcss
          autoprefixer: {},   
        },
      },
      css: ['~/assets/css/main.scss'],
      modules: [
        'nuxt-icon',      //iconify
        [
        '@pinia/nuxt',   //pinia
        {
          autoImports: [
            'defineStore'   //pinia import
          ]
        }
      ]
      ]
})

and here is an example of how im using the store:

<script setup>
import { useTransformStore } from '~~/store/TransformStore';
const store = useTransformStore;
const { toggleChat, buttonTransform } = store;


</script>
<template>
    <div style="z-index: 10; cursor: pointer;">
        <div :style="{
            transition: 'transform 350ms ease-out', transform: 'translateX(' + buttonTransform + 'px'
                + ')'
        }"
            class="w-14 h-14 fixed flex items-center justify-center m-2 bottom-0  border-2 border-red-400 bg-red-800 rounded-[90px]">
            <Icon name="material-symbols:chat-bubble" width="30" height="30" />
        </div>
    </div>
</template>
<style>

</style>

I don't know why it doesn't work, I followed all the documentation

#Pinia not defining stores?