app/pages/organization/index.vue

<template>
  <main>
    <p>Nom : {{ country }}</p>

    <div>
      <button @click="fetchPrevious">Previous</button>
      <button @click="fetchNext">Next</button>
    </div>
    <nuxt-link to="/form">Edit</nuxt-link>
  </main>
</template>

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

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

const fetchCountry = async function () {
  console.log('fetch ', id.value)
  country.value = await em.fetch(Country, id.value)
}
await fetchCountry()

const fetchNext = () => {
  id.value += 1
  console.log('next')
  fetchCountry()
}

const fetchPrevious = async function () {
  id.value -= 1
  console.log('previous')
  await fetchCountry()
}


</script>

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

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