When passing a clone of an object from a parent component to a child component using props, I encounter an issue where changing the value of the status property in the parent component's object also updates the value in the "cloned" object within the child component.
Despite knowing that Object.assign() method performs shallow copying, my object properties are primitive type String and should be copied by value not reference. I have tried various methods like manual assignment and JSON parsing but none of them work as expected.
In the Parent Component: AppServers
<template>
<div>
<AppServerStatus v-for="server in servers" :serverObj="JSON.parse(JSON.stringify(server))">
</AppServerStatus>
<hr>
<button @click="changeStatus()">Change server 2</button>
</div>
</template>
...
In the Child Component: AppServerStatus
<template>
<div>
<h3>Server Name: {{ serverObj.name }}</h3>
<p>Server Status: {{ serverObj.status }}</p>
<hr>
</div>
</template>
...
The expectation is for the value of status property in the child component's object to remain as Normal even after executing changeStatus() in the parent component, however, it too gets updated.