Props Loaded Directly From Vue 3 Setup Are Not Reactive

So you’ve started on Vue 3 and your using props but they are not reactive and your getting this error

	"message": "Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity.",

But your not sure what to do? This is the exact answer you are looking for:

const {description} = toRefs(props);

I’ve made a github with an example to explain all the options.

There is a computed example there as well.

Longer Version

So I am building a component in Vue 3 using the composition API. It gets data from Firestore and passes it to the child for display, I expect the child to update when the parent gets the new data. It seemed simple, the data would display, the parent would update but the child would not. What’s the problem and what does this warning ,mean?

It seemed like this should work

const description = props.description;

But it doesn’t and there is a warning that it wont. This code makes description a string and no longer an object proxied by vue. This does work

const {description} = toRefs(props);

It works because we are now telling vue we want a reference and not a string.

If you have questions or need a better explanation please comment in github.