What problem does this feature solve?

When my page got a lot of 'ref' data. It hard to define every single field. If we have a special compiler macro. Make the following string like:

<script setup>
import { reactive } from 'vue'
const state = defineReactive({
          foo:'',
          bar:''
})
</script>
after compile:
<script setup>
import { reactive,toRefs } from 'vue'
const state = reactive({
          foo:'',
          bar:''
})
const { foo,bar } = toRefs(state)
</script>

So when I handle the field.I can use 'state.xx' replace 'xx.value', when I add a field.I dont need to write 'const xx = ref()'.

Finally.

If it is not officially supported. Please told me how can I add it without breaking the source code.

What does the proposed API look like?

defineReactive

This will not be part of core libraries, but there are plugins for your build system enabling it.

https://github.com/antfu/unplugin-auto-import