After some experimentation, I discovered that the props I passed to a component can actually be changed within the component and affect the parent. This behavior is discussed in the official documentation.
While objects and arrays cannot be directly modified by child components when passed as props, they are still able to mutate the nested properties of these objects or arrays.
I was able to reproduce this scenario using the Vue Playground. The example demonstrates how modifying the prop in the child component affects the value in the parent component.
The issue arises when trying to break this binding between parent and child components. I attempted to use individual refs within the component from the props object, but it did not sever the connection, as demonstrated in the sample code.
What is the proper method to isolate a component from its parent in Vue?
It is worth noting that the variables in the component need to remain reactive for template usage and real-time modifications, as discussed in another related question; however, no solution has been provided for cases involving objects with nested Arrays like in my scenario.