How do generic <script setup> components work (generic="T")?

<!-- GenericList.vue -->
<script setup lang="ts" generic="T extends { id: string | number }">
// T is inferred from whatever array the parent passes in :items.
const props = defineProps<{ items: T[]; label: (item: T) => string }>();
const selected = defineModel<T["id"] | null>({ default: null });
const emit = defineEmits<{ pick: [item: T] }>();
defineSlots<{ row?(props: { item: T; active: boolean }): any }>();

function choose(item: T) {
  selected.value = item.id;
  emit("pick", item);
}
</script>

<template>
  <ul>
    <li v-for="item in props.items" :key="item.id" @click="choose(item)">
      <slot name="row" :item="item" :active="item.id === selected">{{ label(item) }}</slot>
    </li>
  </ul>
</template>

<!-- Users.vue: vue-tsc reports the three marked errors -->
<script setup lang="ts">
import { ref } from "vue";
import GenericList from "./GenericList.vue";

type User = { id: number; name: string; email: string };
const users: User[] = [{ id: 1, name: "Ada", email: "ada@example.com" }];
const selectedId = ref<number | null>(null);
const wrongModel = ref("1");

function onPick(u: User) {
  console.log(u.email);
}
</script>

<template>
  <!-- OK: T is inferred as User everywhere below -->
  <GenericList :items="users" :label="(u) => u.name" v-model="selectedId" @pick="onPick">
    <template #row="{ item, active }">{{ active ? ">" : "" }} {{ item.email }}</template>
  </GenericList>

  <!-- Error 1: the slot prop is a User, and User has no phone -->
  <GenericList :items="users" :label="(u) => u.name">
    <template #row="{ item }">{{ item.phone }}</template>
  </GenericList>

  <!-- Error 2: v-model must be T["id"], which is number for User -->
  <GenericList :items="users" :label="(u) => u.name" v-model="wrongModel" />

  <!-- Error 3: the items do not satisfy the constraint (no id) -->
  <GenericList :items="[{ name: 'no id' }]" :label="(x) => x.name" />
</template>

<script setup lang="ts">
import { defineComponent, h, ref, type VNodeChild } from "vue";

// The non-SFC twin of <script setup generic="T">: defineComponent with a
// generic setup function. Runtime props still have to be listed (types are erased).
const PickList = defineComponent(
  <T extends { id: string | number }>(
    props: { items: T[]; label: (item: T) => string },
    { emit, slots }: {
      emit: (e: "pick", item: T) => void;
      slots: { row?: (p: { item: T }) => VNodeChild };
    },
  ) => {
    return () =>
      h("ul", props.items.map((item) =>
        h("li", { key: item.id, onClick: () => emit("pick", item) },
          slots.row ? [slots.row({ item })] : props.label(item)),
      ));
  },
  { props: ["items", "label"], emits: ["pick"] },
);

type Book = { id: string; title: string; year: number };
type City = { id: number; name: string; population: number };

const books: Book[] = [
  { id: "b1", title: "Dune", year: 1965 },
  { id: "b2", title: "Neuromancer", year: 1984 },
];
const cities: City[] = [{ id: 7, name: "Lagos", population: 15_400_000 }];
const last = ref("nothing yet");

// Inside each handler the argument is already typed: Book here, City below.
const onBook = (b: Book) => (last.value = `book ${b.title} (${b.year})`);
const onCity = (c: City) => (last.value = `city ${c.name}, pop ${c.population}`);
</script>

<template>
  <PickList :items="books" :label="(b) => b.title" @pick="onBook" />
  <PickList :items="cities" :label="(c) => c.name" @pick="onCity">
    <template #row="{ item }"><b>{{ item.name }}</b> ({{ item.population.toLocaleString("en") }})</template>
  </PickList>
  <p>picked: {{ last }}</p>
</template>