A senior frontend engineer is judged on the components other people have to use. The interview version of that is "design a Select for the team" or "review this component's API", and what they listen for is whether you know the primitives (props, emits, defineModel, slots, attrs, provide/inject, defineExpose) well enough to choose the right one, and whether you can explain the contract each one creates.

Know

• Props flow down and are readonly. Type them with defineProps<{ ... }>(). Defaults come from withDefaults or, since Vue 3.5, from reactive props destructure: const { size = 'md' } = defineProps<Props>() stays reactive because the compiler rewrites size to props.size. Pass a destructured prop to watch as a getter (watch(() => size, ...)), not as a value.
• Emits are the component's events contract. defineEmits<{ select: [id: string], 'update:open': [value: boolean] }>() types the payloads. Declared events are removed from $attrs; undeclared listeners fall through to the root element, which is how native events on a wrapper keep working.
• defineModel() (3.4+) replaces the modelValue prop plus update:modelValue emit boilerplate. It supports names (defineModel('title')), options ({ required, default }), modifiers (const [value, modifiers] = defineModel()), and a local fallback: when the parent does not bind it, the ref still works, which gives you controlled and uncontrolled behaviour from one implementation.
• Slots are functions. Named and scoped slots let the consumer own rendering while the component owns behaviour. Type them with defineSlots<{ item(props: { row: T }): any }>(), provide fallback content inside the <slot>, and check presence with $slots.footer before rendering wrappers.
• Attribute fallthrough. Undeclared attributes (class, style, id, data-*, listeners) land on the single root element. Multi-root components and wrappers need defineOptions({ inheritAttrs: false }) plus v-bind="$attrs" on the element that should receive them; useAttrs() reads them in script.
• Provide/inject is the tool for compound components (Tabs/Tab, Accordion/AccordionItem) and for context that would otherwise be drilled through five levels. Use an InjectionKey<T> for typing, provide reactive state wrapped in readonly(), and give inject a default or throw a clear error when the parent is missing.
• defineExpose defines the imperative surface of a component (focus(), open(), reset()); everything else in <script setup> is private. Template refs use useTemplateRef<InstanceType<typeof Child>>('child') (3.5) and see only the exposed members.
• Generic components. <script setup lang="ts" generic="T extends { id: string }"> types props and slots against the same T, which is what makes a typed DataTable<Row> or Select<Option> possible.
• Boolean casting. A boolean prop that is absent is false, not undefined, and <Comp disabled> is true. If a prop is string | boolean, declaration order in runtime props matters; with TypeScript types the compiler handles it.
• useId() gives SSR-stable ids for label/for and aria-* associations, which removed a whole class of hydration mismatches in form components.

How it works

A team Select with the full toolkit: a generic option type, defineModel, typed slots and emits, attrs forwarded to the trigger, and a stable id:

<script setup lang="ts" generic="T extends { value: string, label: string, disabled?: boolean }">
defineOptions({ inheritAttrs: false })

const { options, placeholder = 'Select…' } = defineProps<{
  options: T[]
  placeholder?: string
  label: string
}>()

const model = defineModel<T['value'] | null>({ default: null })
const emit = defineEmits<{ open: [], close: [] }>()

const slots = defineSlots<{
  option(props: { option: T, selected: boolean }): any
  empty(): any
}>()

const id = useId()
const open = ref(false)
const selected = computed(() => options.find(o => o.value === model.value))
const trigger = useTemplateRef<HTMLButtonElement>('trigger')

function choose(option: T) {
  if (option.disabled) return
  model.value = option.value
  open.value = false
  emit('close')
  trigger.value?.focus()
}

defineExpose({ focus: () => trigger.value?.focus() })
</script>

<template>
  <div class="select">
    <label :for="id">{{ label }}</label>
    <button
      :id="id"
      ref="trigger"
      type="button"
      v-bind="$attrs"
      :aria-expanded="open"
      :aria-controls="`${id}-list`"
      @click="open = !open; emit(open ? 'open' : 'close')"
    >
      {{ selected?.label ?? placeholder }}
    </button>
    <ul v-if="open" :id="`${id}-list`" role="listbox">
      <li
        v-for="option in options"
        :key="option.value"
        role="option"
        :aria-selected="option.value === model"
        :aria-disabled="option.disabled || undefined"
        @click="choose(option)"
      >
        <slot name="option" :option="option" :selected="option.value === model">
          {{ option.label }}
        </slot>
      </li>
      <li v-if="!options.length" role="presentation">
        <slot name="empty">No options</slot>
      </li>
    </ul>
  </div>
</template>

A compound component through provide/inject, with a typed key and readonly state:

export interface TabsContext {
  active: Readonly<Ref<string>>
  select: (id: string) => void
  register: (id: string) => void
}
export const TABS_KEY: InjectionKey<TabsContext> = Symbol('team-tabs')

export function useTabsContext(): TabsContext {
  const ctx = inject(TABS_KEY)
  if (!ctx) throw new Error('<TeamTab> must be used inside <TeamTabs>')
  return ctx
}

<script setup lang="ts">
import { TABS_KEY } from './tabs'

const active = defineModel<string>({ default: '' })
const ids: string[] = []

provide(TABS_KEY, {
  active: readonly(active),
  select: id => { active.value = id },
  register: (id) => {
    ids.push(id)
    if (!active.value) active.value = id
  },
})
</script>

<template>
  <div role="tablist"><slot /></div>
</template>

Exercise

Be able to say