app/pages/poc/index.vue

<template>
  <main>
    <p>{{ file }}</p>

    <div class="ma-3">
      <button @click="fetchPrevious" class="mr-3">Previous</button>
      <button @click="fetchNext">Next</button>
    </div>
    <div class="ma-3">
      <nuxt-link :to="'/poc/' + file.id" class="mr-3">Edit</nuxt-link>
      <nuxt-link to="/poc/new">New</nuxt-link>
    </div>
  </main>
</template>

<script setup lang="ts">
  import {useEntityManager} from "~/composables/data/useEntityManager";
  import {Ref} from "@vue/reactivity";
  import ApiResource from "~/models/ApiResource";
  import {File} from "~/models/Core/File";

  const id: Ref<number> = ref(726900)
  const em = useEntityManager()
  const file: Ref<ApiResource | null> = ref(null)

  const fetch = async function () {
    console.log('fetch file ', id.value)
    file.value = await em.fetch(File, id.value)
  }
  await fetch()

  const fetchNext = () => {
    id.value += 1
    fetch()
  }

  const fetchPrevious = async function () {
    id.value -= 1
    await fetch()
  }
</script>

<style>
a {
  color: blue;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}

button {
  border: grey solid 1px;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}
button:hover {
  text-decoration: underline;
}
button:focus {
  background-color: lightgrey;
}
</style>