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

[kranachan]

Same problem, try not to deconstruct it: const motions = useMotions()

[Naimzz]

Tested on v. 2.0.0-beta.27 and v. 2.0.0, accessing useMotions() with or without deconstruct is always empty ( equals to empty object )

[idflood]

I recently encoutered the same issue. After adding a few console log (or just randomly?) the useMotion started working again but it was not stable, and after reloading and/or restarting nuxt it broke again.

I got it working again after downgrading nuxt to 3.4.3 and deleting the .nuxt folder.

[BobbieGoede]

It looks like this is due to the properties on the object returned by useMotions being set after script is run. As mentioned already, a possible workaround would be not to deconstruct the object.

I'll mark this a bug since deconstruction is shown as an example in the documentation, will investigate it later!