fix: component inside renders non element root node that cannot be animated

src/views/Dashboard/index.vue

@@ -1,16 +1,18 @@
 <template>
-  <div i-ant-design:account-book-filled icon></div>
-  <div i-ant-design:aim-outlined icon></div>
-  <svg-icon
-    icon-name="material-symbols-light:18-up-rating-outline-rounded"
-  ></svg-icon>
-  <svg-icon
-    icon-name="https://zishui.oss-cn-beijing.aliyuncs.com/BugFilled.svg"
-    :custom-class="val"
-    @click="handle"
-  ></svg-icon>
-  <el-button>DashBoard</el-button>
-  <el-button @click="handle"></el-button>
+  <div>
+    <div i-ant-design:account-book-filled icon></div>
+    <div i-ant-design:aim-outlined icon></div>
+    <svg-icon
+      icon-name="material-symbols-light:18-up-rating-outline-rounded"
+    ></svg-icon>
+    <svg-icon
+      icon-name="https://zishui.oss-cn-beijing.aliyuncs.com/BugFilled.svg"
+      :custom-class="val"
+      @click="handle"
+    ></svg-icon>
+    <el-button>DashBoard</el-button>
+    <el-button @click="handle"></el-button>
+  </div>
 </template>
 <script lang="ts" setup>
 const { proxy } = getCurrentInstance()!;