Deconstructing `useMotions()` returns `undefined`

[madsh93]

Following the examples from the docs: https://motion.vueuse.org/directive-usage.html#access-a-v-motion-instance

<template>
  <div
    v-motion="'custom'"
    :initial="{ opacity: 0, y: 100 }"
    :enter="{ opacity: 1, y: 0 }"
    :variants="{ custom: { scale: 2 } }"
  />

<button type="button" @click="customEvent">
  Click me
</button>

</template>

<script setup>
import { useMotions } from '@vueuse/motion'

// Get custom controls
const { custom } = useMotions()

const customEvent = () => {
   console.warn(custom)   // <-- Returns undefined
  custom.variant.value = 'custom' // <-- Does not work
}
</script>

Note the custom from useMotions() is undefined

Tested on v. 2.0.0-beta.27