How to make a reactive copy from props with Vue3/TypeScript?

Question

How can I take a value (in this case, an object) outside of the props it was provided in and place it into a reactive variable without affecting the original props?

To give more context, I am attempting to programmatically generate a Naive UI Form, which requires an object variable that has the values of all of the fields used in the form as key-value pairs.

Example:

const formValues = ref({
  email: '',
  password: '',
})

These values are reactive, thanks to the "ref". My issue is getting the object inside of my props, which is identical to the object inside of the above ref, and actually making that reactive.

Here's my code:

const props = defineProps<{ options: Model }>()
const { options } = toRefs(props)
// The above works fine when I want to use something
// like options.name inside of a component

console.log(options.value.form.values) // Prints out the correct object.
const values = ref(options.value.form.values)
console.log(values.value) // Prints out a <proxy>, <target> Object, and the fields remain unreactive.

I am at a complete loss with this one. I have also attempted copying the object from inside of the options, but that has the same result.

Quick edit: I am using the <script setup> syntax.

Answer 1

check this link https://vuejs.org/guide/typescript/composition-api.html#props-default-values

    <script setup lang="ts">
    interface Props {
      foo: string
      bar?: number
    }
    
    // reactive destructure for defineProps()
    // default value is compiled to equivalent runtime option
    const { foo, bar = 100 } = defineProps<Props>()
    </script>