Destructure Reactive object in Vue script setup

Question

I'm following the Vue 3 documents on how to move to using the <script setup> tags to simplify my component code.

One of the perks of using this setup is that you no longer have to use the export default boilerplate to explicitly return an object: anything declared on the top level scope will be automagically available in templates.

The issue I have is that in my app I have a very large object as my initial state, which in my normal Vue 3 app I can return and have automatically destructured, like this:

<script>
    import { reactive, toRefs } from 'vue'

    export default {
        setup() {
            const state = reactive({
                foo: 1,
                bar: 2,
                // the rest of a very large object
            })
            
            return toRefs(state) 
        }
    }
</script>

This saves me having to declare each and every item in the object as its own ref(), removing boilerplate.

My question is, how can I achieve the same auto-destructuring in the mode of Vue, where it only detects top level declarations? I want to be able to reference the keys of the object directly, without having to use state.foo or state.bar, but not have to explicitly declare every single one as a const in order to make it available in the

<script setup>
    import { reactive, toRefs } from 'vue'

    const state = reactive({
                foo: 1,
                bar: 2,
                // the rest of a very large object
            })

    const { foo, bar, ? } = toRefs(state) // how do I destructure this dynamically? 
</script>

Answer 1

You can destructure your object like you are doing and save the rest of the object keys and values with the spread operator.

<script setup>
    import { reactive, toRefs } from 'vue'

    const state = reactive({
                foo: 1,
                bar: 2,
                test: 'test',
                // the rest of a very large object
            })

    const { foo, bar, ...rest } = toRefs(state) // how do I destructure this dynamically? 
</script>

Every key but foo and bar can be reached by accessing the rest variable. Like rest.test

If this isn't what you're after, I don't think what you're trying to do is possible.

See this post if my answer wasn't what you're looking for: How to destructure into dynamically named variables in ES6?