Composition-api: fix: Computed Property not updating when imported from composable function

[DotCoyote]

🐛 The bug
Hi everyone!
I got problems with a computed property inside a composable function. Basically, I have a computed prop in a composable function which is generated by a prop passed to the composable.

The computed prop itself reacts to the props-changes (when logging in the computed prop, it logs every time the prop changes), but does not update the exported variable.

🛠️ To reproduce
https://codesandbox.io/s/autumn-night-1vsyp

Steps to reproduce the behavior:

1. Click on the Button "Admin"
2. See that only props.users and the computed prop directly from the component is showing

On local development, when HMR is triggered or I manually refresh the page on the admin-page, the sortedUsers-list is showing.

🌈 Expected behaviour
The reactive computed prop works when returned from a composable function.

[danielroe]

This is because you access props.users directly in your setup function in UserList, but that is not reactive. In order to get a ref that is kept up to date you could do something like the below, and amend your composable to accept a ref.

const { users } = toRefs(props)
// Or
const users = computed(() => props.users)