JS.VUE.NO.SETUP.PROPS.DESTRUCTURE

Rule Details

This rule reports the destructuring of props passed to setup causing the value to lose reactivity.

{'vue/no-setup-props-destructure': ['error']}

<script>
export default {
  /* GOOD */
  setup(props) {
    watch(() => {
      console.log(props.count)
    })

    return () => {
      return h('div', props.count)
    }
  }
}
</script>

Destructuring the props passed to setup will cause the value to lose reactivity.

{'vue/no-setup-props-destructure': ['error']}

<script>
export default {
  /* BAD */
  setup({ count }) {
    watch(() => {
      console.log(count) // not going to detect changes
    })

    return () => {
      return h('div', count) // not going to update
    }
  }
}
</script>

Also, destructuring in root scope of setup() should error, but ok inside nested callbacks or returned render functions:

{'vue/no-setup-props-destructure': ['error']}

<script>
export default {
  setup(props) {
    /* BAD */
    const { count } = props

    watch(() => {
      /* GOOD */
      const { count } = props
      console.log(count)
    })

    return () => {
      /* GOOD */
      const { count } = props
      return h('div', count)
    }
  }
}
</script>

Options

Nothing.

Further Reading

• Guide - Composition API - Setup (https://v3.vuejs.org/guide/composition-api-setup.html)
• Vue RFCs - 0013-composition-api (https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)