vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.69k stars 8.33k forks source link

destructured props loses reactivity when adding default in 3.5.3 #11863

Closed MohanDrey24 closed 2 months ago

MohanDrey24 commented 2 months ago

Vue version

3.5.3

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-yaazew?file=components%2FVInput.vue,app.vue,package.json

Steps to reproduce

When pressing the toggle button in app.vue, the type doesn't change at all even though the props is supposedly reactive (Vue 3.5.3 + Nuxt 3.13.1) https://stackblitz.com/edit/nuxt-starter-yaazew?file=components%2FVInput.vue,app.vue,package.json

In Vue 3.4.38 + Nuxt 3.13.1, the type changes whenever i press the toggle button meaning it still retains reactivity https://stackblitz.com/edit/nuxt-starter-w6nfak?file=app.vue,components%2FVInput.vue

I found out that by removing the default value of the destructured props in Vue 3.5.3 + Nuxt 3.13.1, it will become reactive again but in Vue 3.4.38 + Nuxt 3.13.1, it doesn't loses it's reactivity even with a default value.

What is expected?

I expected the VInput component prop type to toggle from text to password and vice versa whenever we press the toggle button

What is actually happening?

It doesn't change the prop type of the VInput component

System Info

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: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.5.3 => 3.5.3

Any additional comments?

No response

edison1105 commented 2 months ago

It's weird. it works fine in playground

MohanDrey24 commented 2 months ago

It's weird. it works fine in playground

so this issue is caused by nuxt perhaps? because i noticed this issue in our production app when we updated from vue 3.4+ to 3.5+ and nuxt 3.12.4 to nuxt 3.13.0

skirtles-code commented 2 months ago

I believe this is a known issue with Nuxt: https://github.com/nuxt/nuxt/issues/28829.

JohnieXu commented 2 months ago

@MohanDrey24 For now you can U can do like this: https://github.com/nuxt/nuxt/issues/28829#issuecomment-2329411615