How to interact with multiple instances of the same transition?

[Fanna1119]

I have a component as followed.

//motionfx.vue

<template>
    <transition @leave="(el, done) => motions.notification.leave(done)">
        <div
            v-if="copied"
            v-motion-pop="'notification'"
            class="bg-yellow-300 fixed py-4 px-8 rounded-full bottom-16 right-4 z-10"
        >
            <p class="text-yellow-900">Message Copied!</p>

            <button
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
                @click="copied = !copied"
            >closenotification</button>
        </div>
    </transition>

    <button
        class="py-4 px-8 rounded-full bottom-16 right-4 bg-red-600"
        @click="copied = !copied"
    >Open</button>
</template>

<script>
import { useMotions } from '@vueuse/motion'
import { ref } from '@vue/reactivity'
export default {

    setup() {
        const copied = ref(false)
        const motions = useMotions()

        return {
            copied, motions
        }
    }

}
</script>

in my parent where the component is initiated multiple times.:

    <motionfx></motionfx>
    <motionfx></motionfx>
    <motionfx></motionfx>
    <motionfx></motionfx>
    <motionfx></motionfx>

it functions as expected, up until i open multiple components and then clicking 'close'/@Leave transition.

Cannot read property 'leave' of undefined

I am assuming it is something to do with:
https://motion.vueuse.org/api/use-motions.html

If you declare a name using v-motion attribute value, the motion instances will be added to the global useMotions state and be accessible from any component.

Be careful about duplicating the same name, note that the name can be including a variable.

Of course I don't understand how to get around this. :)

[Tahul]

Hello @Fanna1119 😄

Maybe the documentation is unclear about this point, but you should be giving unique names to each of these components.

Maybe adding a prop to it specifying a key (or generating a random id for each from inside the component) should be enough for that. 😄

Let me know if you struggle with this, would be happy to help!

[Tahul]

I'm closing this, feel free to re-open if any more questions.