Vue 3 + Vite + Typescript - dev & build not picking up TS Errors

I'm using Vue 3, Vite and TypeScript. I wanted to give a try of building Vue project with TypeScript. The configuration has been really difficult so far. I've been looking at various documentations but I'm struggling to achieve my goal.
The project shouldn't build and throw errors if there's something wrong with the code.

I'm attaching the code below and I'd like to ask for help, please.

App.vue

<template>
  <header>
    <h1>The Learning Resources App</h1>
  </header>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

// import StoredResource from '//StoredResource';

interface VueData {
  storedResources: StoredResource[];
}

export default defineComponent({
  name: 'App',
  data(): VueData {
    return {
      storedResources: [
        {
          id: 'official-guide' as number,
          title: 'Official Guide',
          description: 'The official Vue.js documentation.',
          link: 'https://vuejs.org/',
        },
        {
          id: 'google',
          title: 'Google',
          description: 'Learn to google...',
          link: 'https://www.google.co.uk/',
        },
      ],
    };
  },
});
</script>

package.json

{
  "name": "the-learning-resources-app---vue-js-ts",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 5001",
    "test": "jest src",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5001/ 'npx cypress open'",
    "test:e2e:ci": "start-server-and-test 'npm run build && npm run preview' http://127.0.0.1:5001/ 'npx cypress run'",
    "cypress": "cypress run",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix",
    "format": "prettier -w .",
    "prepare": "husky install"
  },
  "dependencies": {
    "vue": "^3.2.36"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/jest": "^28.1.1",
    "@types/jsdom": "^16.2.14",
    "@types/node": "^16.11.36",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/test-utils": "^2.0.0-rc.18",
    "@vue/tsconfig": "^0.1.3",
    "cypress": "^9.7.0",
    "eslint": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-vue": "^8.2.0",
    "husky": "^8.0.1",
    "jest": "^26.6.3",
    "jsdom": "^19.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "start-server-and-test": "^1.14.0",
    "ts-jest": "^26.5.6",
    "typescript": "~4.7.2",
    "vite": "^2.9.9",
    "vitest": "^0.13.0",
    "vue-jest": "^5.0.0-alpha.10",
    "vue-tsc": "^0.35.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "/@/*": [
        // / to begin with.
        "src/*"
      ]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "types": ["vite/client", "jest", "@types/jest", "node", "cypress"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Get this solution programmatically \u2014 free, no authentication.