Vue version

3.3.0-beta.2

Link to minimal reproduction

https://play.vuejs.org/#eNp9j01uwjAQha8y8gaoSNzCLkoieoMewJtABnAb/8ge00WUu3dcWhTRio2lN++Nv3mjePW+vCQUlajjIWhPEJGSh6Gzp0YJikq0ymrjXSAY4eCMT4Q9THAMzsCCdxfKHpyN2TZpIO0HjYEDDfR41BbfgvOxnpsV2GT2OdQuV7/bhPw0N8JyuYKmnf/4BBsO1/J6J1/FgtD4oSNkBVCfX9pxvH40TbVkmfO3jFiLa5HCdL58j85y7TFvqh+D21bwPckz7pa1EmciHyspk/Ufp5IvlDv2ZEiWtMGid2a3Lbflc7FH6sqN7HWkuVtiNMU+uM+IgblKrGcIycMLhiKg7TFgeIi8y/6DvUv8QWfypOwkpi+sPLDG

Steps to reproduce

See error message at bottom of page:

multiplier is not defined

Reproduction

<script setup lang="ts">
import { computed } from 'vue'
const { multiplier } = defineProps<{ multiplier: number }>()
const test = computed(() => multiplier * 2)
</script>

<template>
  <h1>{{ test }}</h1>
</template>

Transformation

import { computed } from 'vue'

export default _defineComponent({
  props: {
    multiplier: {}
  },
  setup(__props) {
    // Missing transformation to __props.multiplier
    const test = computed(() => multiplier * 2)

    return (_ctx,_cache) => {
      return (_openBlock(), _createElementBlock("h1", null, _toDisplayString(test.value), 1 /* TEXT */))
    }
  }
})

What is expected?

I expect multiplier to be transformed to __props.multiplier.

What is actually happening?

It is not transformed, so the error is triggered.

System Info

No response

Any additional comments?

No response

There was some breaking changes introduced in alpha.10 6b13e04 in relation to previous alpha releases, with the addition of options.propsDestructure check.

Since it's an experimental feature you need to explicitly enable it in @vitejs/plugin-vue or vue-loader. Here's an example of vite config:

export default defineConfig({
  plugins: [
    vue({
      script: {
        propsDestructure: true
      }
    })
  ]
})

Regarding online playground, looks like team forgot to enable this option https://github.com/vuejs/core/blob/main/packages/sfc-playground/vite.config.ts#L12

@sqal Thanks! ❤️