[Vue]配列にObserverが入っている時に通常の配列に戻す方法

はじめに

本記事は、筆者による理解の復習・確認やアウトプットの練習のために書いております。
間違った解釈等ございましたら、ご連絡いただけますと幸いです。

結論

JSON.parse(JSON.stringfy(array))で通常の配列に戻せる
下記は Vue.js で親 → 子に array を渡した時のコード

// 親コンポーネント
const array = [{ name: '佐藤' }]

// 子コンポーネント
props: {
  array: { type: Array, required: true }
}

console.log(this.array) // [{ name: '佐藤' }, [__ob__: Observer]]のように表示されてしまう

const jsonString = JSON.stringfy(this.array) // "[{ name: '佐藤' }]" 配列をJSON文字列に変換
const json = JSON.parse(jsonString) // [{ name: '佐藤' }] JSON文字列をJSONに変換

背景

array.includesなどのメソッドを使った時に Observer が入っていると
同値なのに同値とみなしてくれないなどの事象があった

疑問点

どの状態の時に配列に Observer が入るのか