Skip to content

Array.prototype.push mutates readonly arrays created with ref([]) #13903

@arfedulov

Description

@arfedulov

Vue version

3.5.18

Link to minimal reproduction

https://github.com/arfedulov/vue-reactive-push-reproduce

Steps to reproduce

  • Clone the repository.
  • Run dev server.
npm i
npm run dev
  • Look at "example with ref()".
  • Click (1) button
  • See that item was added (that's correct)
  • Click (2) button
  • See that item was added and there is no warnings (that's incorrect, because the array is readonly)
  • Click (3) button
  • See that item was not added and there is a warning in console "Set operation on key "items" failed: target is readonly" (that's correct)

What is expected?

The array always stays immutable when wrapped in readonly().

What is actually happening?

An object wrapped in readonly() stays mutable by Array.prototype.push() call on its property.

System Info

System:
    OS: Linux 6.14 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700KF
    Memory: 21.78 GB / 31.16 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
  Browsers:
    Chrome: 140.0.7339.127
  npmPackages:
    vue: ^3.5.18 => 3.5.21

Any additional comments?

This is only the case when we create object like this readonly({ myArray: ref([]) }). There is no problem if we create object
like this readonly(reactive({ myArray: [] })), as you can see in "example with reactive()".

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: reactivity

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions