Error: Module '"vue"' has no exported member 'ref', 'computed'. etc

Does anyone experience this issue? I have laravel + vue 3 project and I recently use typescript. I installed these,

"typescript": "^5.9.3",
"vue-tsc": "^2.2.12"
"@vitejs/plugin-vue": "^6.0.0",

tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "bundler",
        "strict": true,
        "jsx": "preserve",
        "isolatedModules": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "allowSyntheticDefaultImports": true,
        "lib": ["ESNext", "DOM"],
        "skipLibCheck": true,
        "noEmit": true,
        "types": ["vite/client"],
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"]
        },
        "moduleDetection": "force"
    },
    "include": [
        "resources/js/**/*.ts",
        "resources/js/**/*.d.ts",
        "resources/js/**/*.tsx", 
        "resources/js/**/*.vue",
    ],
}

Note that I didn't install @types/vue as I've read that it can cause that issue but then it still happens even without it.

When I use typescript in my component, the import { ref } from 'vue'; and other import from vue will have that error. I believe that causes as well why type checking on variable doesn't work and itt doesn't show any error. Like,

const test = ref<number>(0);
test.value = '23';

That should cause error right since I assign string to number.

Can anyone help me on this one? Thanks