请问anime.js在vue3中无法使用SVG 运动路径动画如何解决？anime.js在正常html中写运动路径动画生效

anime.js在正常html中写运动路径动画生效，但是同样的代码在vue中不生效，哪怕是放在了onMounted里面也是不生效，反而多出了很多symbol标签一点卵用没有，有什么解决方案吗？正常html中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib//anime.min.js"></script>
    <style>
      div {
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        width: 1rem;
        height: 1rem;
      }
      .green {
        width: 20px;
        height: 20px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <svg width="256" height="112" viewBox="0 0 256 112">
      <path
        fill="none"
        stroke="#FFF"
        d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"
      />
    </svg>
    <div class="green"></div>

    <script>
      var path = anime.path("path");

      anime({
        targets: "div",
        translateX: path("x"),
        translateY: path("y"),
        rotate: path("angle"),
        duration: 3000,
        loop: true,
        easing: "linear",
      });

      anime({
        targets: "path",
        opacity: 0,
        duration: 6000,
        loop: true,
        direction: "alternate",
        easing: "easeInOutExpo",
      });
    </script>
  </body>
</html>

vue3中

<template>
  <div class="wrap">
    <svg width="256" height="112" viewBox="0 0 256 112">
      <path
        fill="none"
        stroke="#FFF"
        d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"
      />
    </svg>
    <div class="green"></div>
  </div>
</template>

<script>
import anime from "animejs/lib/anime.js";
import { ref, onMounted } from "vue";
export default {
  setup() {
    onMounted(() => {
      var path = anime.path("path");

      anime({
        targets: [".green"],
        translateX: path("x"),
        translateY: path("y"),
        rotate: path("angle"),
        duration: 3000,
        loop: true,
        easing: "linear",
      });

      anime({
        targets: "path",
        opacity: 0,
        duration: 6000,
        loop: true,
        direction: "alternate",
        easing: "easeInOutExpo",
      });
    });

    return {};
  },
};
</script>

<style>
body {
  height: 300px;
}
.wrap {
  width: 200px;
  height: 200px;
}
div {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 1rem;
  height: 1rem;
}

.green {
  width: 20px;
  height: 20px;
  background-color: red;
}
svg {
  width: 200px;
  height: 200px;
}
</style>