explain how work with useMotion

[sokolovdm]

System info

System:
OS: macOS 13.5.2
CPU: (10) x64 Apple M1 Pro
Memory: 29.90 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v14.15.1/bin/yarn
npm: 10.5.1 - ~/Documents/projects/persons-web/node_modules/.bin/npm
Watchman: 2022.10.17.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 124.0.6367.119
Safari: 16.6
npmPackages:
@vueuse/motion: ^2.1.0 => 2.1.0
vue: 2.7.16 => 2.7.16

Reproduction

<template lang="pug">
    div(
        :class="styles.root"
    )
        div(
            ref="target"
            :class="styles.balloon"
        )
</template>

<script lang="ts">
import Vue, { computed, PropType, ref, toRefs, useCssModule, watch } from 'vue'
import { MotionDirective, useMotion } from '@vueuse/motion'

import { DynamicIslandSizePresets } from './data'

type Size = keyof typeof DynamicIslandSizePresets

export type DynamicIslandProps = {
    size: Size
}

export default Vue.extend({
    name: 'DynamicIsland',
    props: {
        size: {
            type: String as PropType<DynamicIslandProps['size']>,
            default: 'initial',
        },
    },
    setup(props) {
        const styles = useCssModule()
        const target = ref<HTMLElement>()
        const { variant } = useMotion(target, {
            initial: {
                scale: 1,
                opacity: 0,
            },
            enter: {
                opacity: 1,
            },
        })

        watch(
            () => props.size,
            size => {
                variant.value = size
            }
        )

        return {
            styles,
            target,
            variant,
        }
    },
    directives: {
        // @ts-ignore
        motion: MotionDirective(),
    },
})
</script>

<style module lang="scss" src="./DynamicIsland.module.scss" />

Describe the bug

Hello. Can someone help me? I try to use the useMotion declaration and nothing is happening. What am I doing wrong?
Thanks.

Additional context

No response

Logs

And i have this warning

./node_modules/@vueuse/motion/dist/index.mjs 1588:15-31export 'resolveComponent' (imported as 'resolveComponent') was not found in 'vue' (possible exports: EffectScope, computed, customRef, default, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, isProxy, isReactive, isReadonly, isRef, isShallow, markRaw, mergeDefaults, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useListeners, useSlots, version, watch, watchEffect, watchPostEffect, watchSyncEffect)