Vue 更新 ref 中的「整個」array 時失效

情況

there are 2 files below, when I import a const object (called COMMON) to update an array content in another object of reference (myref) in vue3, why does it not change?

// file1.ts
export const COMMON = { a:1, b:2 };

// file2.ts
import { COMMON } from "file1.ts"

const myref = ref( {name:'123', list: [ {a: 5, b: 6} ]} );
myref.list = [COMMON]

原因

Vue3 使用 Javascript Proxy 實作監聽器，然而Javascript Proxy 有時無法偵測到整個 object 覆寫的情況

In Vue 3, when you’re trying to update a ref object, Vue might not be able to detect the change¹. 

This is because Vue’s reactivity system is based on JavaScript’s Proxy object, which can’t detect changes when you directly set an item with the index operator or modify the length of an array²