A basic implementation of router.getRoutes() to print routes to screen causes a strange hydration mismatch.

// implimentation

<template>
  <div>
    <v-list>
      <v-list-item v-for="(item, i) in routes" :key="i">{{ item }}</v-list-item>
    </v-list>
  </div>
</template>

<script setup lang="ts">
  definePageMeta({
    title: 'Test Routes',
  })

  const router = useRouter();

  const routes = ref(router.getRoutes())

</script>

error as shown on screen:

Here’s the error formatted with n replaced:

<div class="v-list-item__content" data-no-activator=""><!----><!----><!--[-->
    {
      "path": "/auth",
      "name": "auth",
      "meta": {},
      "props": {
        "default": false
      },
      "children": [],
      "instances": {},
      "leaveGuards": {
        "Set(0)": []
      },
      "updateGuards": {
        "Set(0)": []
      },
      "enterCallbacks": {},
      "components": {},
      "__vd_id": "0"
    }<!--]--></div>

- rendered on server: "
    {
      "path": "/auth",
      "name": "auth",
      "meta": {},
      "props": {
        "default": false
      },
      "children": [],
      "instances": {},
      "leaveGuards": {
        "Set(0)": []
      },
      "updateGuards": {
        "Set(0)": []
      },
      "enterCallbacks": {},
      "components": {}
    }"

- expected on client: "
    {
      "path": "/auth",
      "name": "auth",
      "meta": {},
      "props": {
        "default": false
      },
      "children": [],
      "instances": {},
      "leaveGuards": {
        "Set(0)": []
      },
      "updateGuards": {
        "Set(0)": []
      },
      "enterCallbacks": {},
      "components": {},
      "__vd_id": "0"
    }" 

Can this really just be the escape characters returned by getRoutes() on the server causing the mismatch? Can anyone explain why server/client is rendering getRoutes() differently? I think unless anyone knows, the only way around this is lots of trial and error. :_(