Shallow variables are being unwrapped in template

[Joery-M]

Vue - Official extension or vue-tsc version

2.1.8

VSCode version

1.94.2

Vue version

3.5.12

TypeScript version

5.6.3 and 5.7.0-dev.20241026

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor          
    Memory: 13.51 GB / 31.14 GB
  Binaries:
    Node: 22.7.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.1 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.105)
    Internet Explorer: 11.0.22621.3527

package.json dependencies

{
  "dependencies": {
    "vue": "^3.5.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.4",
    "typescript": "~5.6.2",
    "vite": "^5.4.9",
    "vue-tsc": "^2.1.6"
  }
}

Steps to reproduce

1. Install version 2.1.8 of the Vue - Official VSCode extension
2. Create an SFC file.
3. Paste in the following code:

<template>
    <div>
        <template v-for="item in items">
            {{ item.name.value }}
            {{ item.id }}
        </template>
    </div>
</template>

<script setup lang="ts">
import { shallowReactive, type Ref } from 'vue';

interface MyItem {
    name: Ref<string>;
    id: string;
}

const items = shallowReactive<MyItem[]>([]);
</script>

4. See how the item.name.value is marked as incorrect

What is expected?

The template for {{ item.name.value }} should be correct, since the array is shallow, which means the name property needs to be accessed using name.value.

What is actually happening?

vue-tsc unwraps the refs inside items, meaning that it marks item.name.value as incorrect, and only accepts item.name.

Link to minimal reproduction

https://github.com/Joery-M/vue-sfc-issue

Any additional comments?

This becomes an issue during assignment, like with v-model or inside a callback function, since the value will be replacing the ref, instead of the value inside the ref. This can lead to breaking the application.

[KazariEX]

It's caused by #4902 which has been reverted.

[Perdolique]

@KazariEX hey. In which version has been reverted? I installed the latest of vue-tsc version 2.1.8 and it doesn't compile the code anymore because every item in the v-for requires a Reactive wrapper.

[bmulholland]

Came here at the exact same time with the same question as @Perdolique. I just upgraded to 2.1.8 and am now getting a bunch of type errors that look to be this issue. The linked PR says it appears in 2.1.8, which doesn't make sense because this issue is filed as being about 2.1.8 as well.

We'll skip 2.1.8, ideally 2.1.9 could be released soon with the issue actually fixed.

[KazariEX]

@KazariEX hey. In which version has been reverted? I installed the latest of vue-tsc version 2.1.8 and it doesn't compile the code anymore because every item in the v-for requires a Reactive wrapper.嘿。哪个版本已经恢复了？我安装了最新的vue-tsc版本2.1.8 ，它不再编译代码，因为v-for中的每个项目都需要一个Reactive包装器。

Please fallback to v2.1.6 first.

[Perdolique]

Ahh, I see the revert. It seems like hasn't been released yet. v2.1.6 works as expected. 👍