[Vue] Destructure return value of composition function for best practice

If we have multi composition functions:

    <template>
      ...
    </template>
    <script>
    import useEventSpace from "@/use/event-space";
    import useMapping from "@/use/mapping";
    export default {
      setup() {
        return { ...useEventSpace(), ...useMapping() }
      }
    };
    </script>

In the code above, even though it’s quite efficient, has introduced a problem. Now it’s not clear anymore which objects are coming from which composition functions. This was part of the reason we moved away from Mixins, which can hide which objects come from which code snippets. For this reason, we may want to write this differently using local objects:

    <template>
      ...
    </template>
    <script>
    import useEventSpace from "@/use/event-space";
    import useMapping from "@/use/mapping";
    export default {
      setup() {
        const { capacity, attending, spacesLeft, increaseCapacity } = useEventSpace();
        const { map, embedId } = useMapping();

        return { capacity, attending, spacesLeft, increaseCapacity, map, embedId };
      }
    };
    </script>