Wrong type when using $ref into computed

[theRenard]

Describe the bug

I'm not really sure if this is a bug or I'm just missing something but when I use $ref I'm unable to have the right type in computed values

selection.value is (property) Ref<"static" | "relative" | "dynamic">.value: "static" | "relative" | "dynamic"

selection2 is const selection2: ReactiveVariable<"static"> | ReactiveVariable<"relative"> | ReactiveVariable<"dynamic">

I'm using vue 2.7.16 with typescript 4.8.4

const selection = ref<('static' | 'relative' | 'dynamic')>('dynamic');
const selection2 = $ref<('static' | 'relative' | 'dynamic')>('dynamic');

const component = $computed(() => {
  switch (selection.value) {
    case 'statics':
      return StaticSettings;
    case 'relative':
      return RelativeSettings;
    case 'dynamic':
      return DynamicSettings;
    default:
      return null;
  }

  const component2 = $computed(() => {
  switch (selection2) {
    case 'statics': // this is wrong but typescript is not complaining
      return StaticSettings;
    case 'relative':
      return RelativeSettings;
    case 'dynamic':
      return DynamicSettings;
    default:
      return null;
  }
});

Reproduction

in issue

System Info

System:
    OS: macOS 14.4.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 24.25 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
    pnpm: 7.30.1 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.62
    Safari: 17.4.1

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[zhiyuanzmj]

Can you provide your tsconfig.json?

[theRenard]

Sure thing

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "vuetify",
      "node",
      "unplugin-vue-macros/vue2-macros-global"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "tests/**/*.ts"
  ],
  "exclude": [
    "src/api/services",
    "node_modules"
  ],
  "vueCompilerOptions": {
    "target": 2.7,
    "plugins": [
      "@vue/language-plugin-pug",
      "@vue-macros/volar/define-options",
      "@vue-macros/volar/define-models",
      "@vue-macros/volar/define-props",
      "@vue-macros/volar/define-props-refs",
      "@vue-macros/volar/define-slots"
    ],
    "vueMacros": {
      "defineModels": {
        "unified": true
      }
    }
  }
}

[zhiyuanzmj]

It works well in my project.
Can you provide a minimal reproducible ?

[sxzz]

We temporarily close this due to the lack of enough information.
Please provide a minimal reproduction to reopen the issue.
Thanks.

Why reproduction is required

[theRenard]

Sure, there must be a misconfiguration on my repo