Currently, I am utilizing a combination of Laravel9 with Vuejs3. In one of my blade views, I pass PHP variables to a Vue component like so:
<subscription-form
location="{{ $props['location'] }}"
orientation="{{ $props['orientation'] }}"
/>
Within the main Vue file where I receive this data, my script setup looks something like this:
const initProps = defineProps(['location', 'orientation']);
const values = reactive(initProps);
This parent Vue calls a child component using the following code:
<component
v-bind:is="steps[step]"
v-bind:formValues="values"
></component>
The issue I'm facing is that I cannot write to the reactive variable values in my child Vues. This results in an error message stating:
[Vue warn] Set operation on key "location" failed: target is readonly.
This problem arises when attempting to modify the value as follows:
props.formValues.location = location;
Prior to passing PHP variables from the blade to the parent Vue, everything was functioning correctly. However, now that data props are being passed through two levels (from blade to main Vue, and then from main Vue to child components), it seems to be read-only.
I have attempted switching the initProps and values variables from const type to var, but unfortunately, this did not resolve the issue.
If anyone has experienced a similar situation or has any insights, your help would be greatly appreciated!