Subscribe on changes!

Vue Ts (2.7 -> 3.3+) Nested type Ref<T> removed

avatar
Sep 7th 2023

Vue version

[2.7.10 => 3.3.4]

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-3ivkqw?file=src%2FAlert.ts&terminal=dev

Steps to reproduce

If you have a nested type (like in Alert.ts of the Stackblitz link) using Ref it is purged out when using it.

IE: Ref<boolean> | boolean will become boolean

What is expected?

The Ref should be available within the parent type

IE: Ref<boolean> | boolean will stay Ref<boolean> | boolean

What is actually happening?

Ref<boolean> | boolean will become boolean

System Info

Local 
System:
    OS: macOS 13.5.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 5.38 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.18.0 - ~/.n/bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 8.19.2 - ~/.n/bin/npm
    pnpm: 6.11.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 116.0.5845.140
    Safari: 16.6
  npmPackages:
    vue: ^2.7.10 => 2.7.14 

Stackblitz
System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.10 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

I am using VsCode (Don't know if this helps) Version: 1.81.1 (Universal) Commit: 6c3e3dba23e8fadc360aed75ce363ba185c49794 Date: 2023-08-09T22:20:33.924Z (4 wks ago) Electron: 22.3.18 ElectronBuildId: 22689846 Chromium: 108.0.5359.215 Node.js: 16.17.1 V8: 10.8.168.25-electron.0 OS: Darwin arm64 22.6.0

avatar
Sep 7th 2023

It's indeed a limitation about types. You can try to wrap data with reactive

queue.value.push(reactive({
  // ...
}));