I have the following vue page:

```
<template>
<a :class="isCurrent($page.url)"
</template>

<script setup>
import {usePage} from '@inertiajs/inertia-vue3'

const isCurrent = (url) => {
  console.log(url);
  console.log(usePage().url);
};
</script>

```

The url of the page is `/comment` and if I inspect the page I find exactly that: [![enter image description here](https://i.stack.imgur.com/xIkrd.png)](https://i.stack.imgur.com/xIkrd.png)

However, on the console log, the url is not displayed correctly:

[![enter image description here](https://i.stack.imgur.com/oZnEA.png)](https://i.stack.imgur.com/oZnEA.png)

While I can access the page correctly inside the template section using `$page.url` I cant access it within `<script setup>` `usePage()` creates a document where everything is ComputedRefImpl:

[![enter image description here](https://i.stack.imgur.com/SsESQ.png)](https://i.stack.imgur.com/SsESQ.png)

How can I access the page object using `usePage()` without having to pass `$page` from the template section?