Vuejs set operation on key failed: target is read-only

Question

I use Laravel9 and Vuejs3. I have a blade view that passes a php variable to a vue component:

<subscription-form
location="{{ $props['location'] }}"
orientation="{{ $props['orientation'] }}"
/>

In the main vue where I receive the data, I have the following code in the script settings:

const initProps = defineProps(['location', 'orientation']);

const values ​​= reactive(initProps);

This parent vue calls a component like this:

<component
          v-bind:is="steps[step]"
          v-bind:formValues="values"
></component>

The problem is that my reactive variable values cannot be written in my child vue. I got an error

[Vue warn] Set operation on key "location" failed: target is readonly.

This happens when I do:

props.formValues.location = location;

It works when I don't have to pass php variables from blade to parent vue. But now I have two levels of data props, from the blade to the main vue and then from the main vue to the subcomponent and it's read only.

Help!

I tried switching the initProps or values variables from const type to var but it didn't do anything.

Answer 1

I am disappointed... This doesn't work because my DefineProps() returns undefined The problem is: capital letters! I changed arrive My DefineProps() returns my object! Why doesn't this work with uppercase letters?