I'm facing a strange issue where altering a child component's prop doesn't trigger a re-render.
Here's the scenario: In the parent component, I have:
<child :problemProp="proplemPropValue"></child>
In the child component, I've defined the prop as:
{
name: "Child",
props: {
problemProp: {
type: [File],
required: true
}
}
When trying to render it in the child component:
<template>
<div id="dropzone-preview" class="file-row">
{{problemProp}} <--This should display the prop as a JSON string-->
</div>
</template>
In the initial rendering, everything displays correctly. However, when a property within problemProp, such as upload.progress, changes in the parent component, it doesn't reflect in the child component.
If I introduce a new prop, dummyProp, in the child component:
{
name: "Child",
props: {
problemProp: {
type: [File],
required: true
},
dummyProp: {
type: Number
}
}
Surprisingly, changing dummyProp now causes problemProp to update as well. What could be causing this behavior? Why does altering dummyProp trigger a re-render but changes to problemProp do not?