Rendering Dynamic Data retrieved from External Server with Tanstack Table or AG Grid

Question

I have this working piece of code in my nuxt3 app ...

<template>
  <div>
    <p v-for="user in users" :key="user.id">{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      users: {},
    }
  },
  async mounted() {
    this.users = await $fetch('https://jsonplaceholder.typicode.com/users')
  },
}
</script>

I would like to recast/refactor the code to use Tanstack Table or AG Grid to show/render the same data. In order to do that, what's the replacement for this line of code (in above code)? ...

<p v-for="user in users" :key="user.id">{{ user.name }}</p>

Thanks