Props are not reactive when destructuring-assigned

[yutanoma]

issue

I have been using the composition-api, and found a bug of the setup method.

The code below is reactive. When the props of this component has changed, the name will be outputted to the web console.

import { createComponent, watch } from '@vue/composition-api'

type Props = {
  name: string
}

export default createComponent({
  props: {
    name: {
      type: String
    }
  },
  setup(props: Props) {
    // this is reactive
    watch(() => console.log(props.name))
  }
})

...Although the code below is not reactive.

import { createComponent, watch } from '@vue/composition-api'

type Props = {
  name: string
}

export default createComponent({
  props: {
    name: {
      type: String
    }
  },
  setup({ name }: Props) {
    // not reactive for props
    watch(() => console.log(name))
  }
})

version of @vue/composition-api

^0.3.2

[posva]

You should not destructure props because it's a reactive object. Extracting the properties instead of reading them by accessing the key in the object loose reactivity

[salvadordiaz]

Could we have a big warning about this in the docs ? I lost a couple of hours tracking a bug that was caused by destructuring of props.
Or maybe props could be wrapped with toRefs before passing them to the setup function ?

[panzerdp]

I wrote a post about how to correctly destructure the props and not lose the reactivity. You might find it useful.