[Bug] Invalid Reactive System

[sheepbox8646]

<script setup lang="ts">
import { defineAnimation, useMotion, usePlayer, useWidget } from '@vue-motion/core'
import { Group, Arc, Polygon, Line } from '@vue-motion/lib'
import { ref } from 'vue';

const { width, height } = useMotion()
width.value = 1600
height.value = 900

const x = ref(0)

const change = defineAnimation((_context, progress) => {
  x.value = progress * 4000
})

const root = useWidget('root')

const { useAnimation } = usePlayer()
useAnimation(root)
  .animate(change, { duration: 2 })

</script>

<template>
  <Group wid="root">
    <Arc :radius="200" :from="-90" :to="90"></Arc>
    <Polygon :points="[
      [-200, 0],
      [200, 0],
      [x, -200]
    ]"/>
    <Line :from="[0, 0]" :to="[x, -Math.sqrt(40000 - x * x)]" :border-color="'white'" :border-interval="[10, 10]"/>
  </Group>
</template>

The anticipate is that get the property change with x, but it failed.

If you are interested in this issue and wanna to solve it, please comment.