In my current component setup, I am receiving props from a parent. However, I am facing an issue where I only want to clone these props without any changes affecting the parent component.
<template>
<input-text v-model="form.name" />
</template>
export default defineComponent({
props: {
record: {
type: Object,
required: true,
default: () => ({}),
},
},
setup(props) {
const form = ref({})
// Need to clone props whenever they change
watchEffect(() => {
dForm.value = props.record
})
return { form }
},
})
My goal now is to create a duplicate of the incoming props every time they are passed - ensuring that the v-model does not alter the original data in the parent component. How can I successfully clone props.record? Attempting methods like Object.assign({}, props.record) have proven unsuccessful so far.