If you want to access the value of the state reaction directly in the script settings, you can use Object destructuring like this:

import { reactive, toRefs } from "vue"

const state = reactive({ name: "admin", age: 20 })
const { name, age } = toRefs(state)

You can then access your values ​​directly in the template

<template>
    {{ name }}
</template>

However, all attributes must be re-entered, which is inconvenient

Script settingsImplicit translation variable definition

const a = ...

to

return {
   a: ...
}

return {...dynamicValue} in script settings is not replaceable and is intended only for common use cases. This requires combining it with script.

return {...toRefs(state)} No benefit since the generated references are not used in the script block. Even if they are, they are usually defined as individual reactive values ​​rather than state objects:

const a = ref(...)
const b = reactive(...)

return { a, b }; // Not needed in script setup

If you need to handle these values ​​as a single object, you can combine them together:

const a = ref(...)
const b = reactive(...)
const state = reactive({ a, b });

return { a, b }; // Not needed in script setup

It works the same way for scripts and script settings.