Vue version

@vue/latest

Link to minimal reproduction

https://sfc.vuejs.org/#eNo9kE2OgzAMha9iZVMqlUSzRbTSnGMyCwqhBZEfxaajUZS714S2O7/3Plu2k/gOQT5WIxrRYh+nQICG1nDRbrLBR4IE0YxwiqYbvFv+M4zRWzhwz0E77aD3Dgn8dYYzpMzGx0PqyLD7bq1+mPo9cr4x2u2UxVthxqrwcnL9sg4GK4aPDLdq34s3YkHGhoUxVgDt/euSUpmQc6tYFXdyYSV41NYPZjlrwbkWHLXq0y1OYj+vtl2QM3rHD0hls1eAWjRQnM3jazetxZ0oYKMUjv32thmljzfFlYyro8kaadDW1+j/0EQerMU2gt+SRX4CMjd+sA==

Steps to reproduce

  const obj = {};
  const arr = readonly([obj]);
  console.log(arr.includes(obj)); // the result is false

What is expected?

expect to be true

What is actually happening?

this result is false

System Info

.

Any additional comments?

no

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-proxy-vs-original-1

A readonly proxy is deep: any nested property accessed will be readonly as well. It also has the same ref-unwrapping behavior as reactive(), except the unwrapped values will also be made readonly.

To avoid the deep conversion, use shallowReadonly() instead.

https://vuejs.org/api/reactivity-core.html#readonly

  const obj = {};
  const arr = readonly([obj]);

Above code use readonly the obj will also reactive, so the arr.includes(obj) is false.

You may need to use

shallowReadonly

playground demo

or

toRaw

playground demo