[Integration] useMutationObserver system composable

[johnleider]

Summary

Integration improvements for useMutationObserver with the v0 system.

Research Findings

v0 Implementation (Production-Ready)

Core Features:

• Configurable Observation: childList, attributes, characterData, subtree
• Smart Defaults: childList: true by default
• Hydration-Aware: Uses useHydration() for SSR support
• Lifecycle Control: pause(), resume(), stop()
• State Tracking: isActive, isPaused
• Once Mode: Auto-stops after first mutation
• Synthetic Immediate: Generates empty entry on immediate trigger

Vuetify 3 Comparison

Feature	v0	Vuetify 3
Pause/resume	✅	❌
State tracking	✅ isActive, isPaused	❌
Once mode	✅	✅
Hydration guard	✅ useHydration()	❌
Smart defaults	✅ childList: true	✅
Lines of code	264	62

Vuetify 3 Usage

Less commonly used than ResizeObserver/IntersectionObserver.

Pattern:

const { mutationRef } = useMutationObserver((mutations) => {
  // Handle DOM changes
}, { attr: true, child: true })

Integration Points

• Consistent observer patterns with useResizeObserver, useIntersectionObserver
• SSR safety via useHydration
• Document use cases (content updates, dynamic styling)
• Consider observer pooling for v0.3.0

Status

✅ Production-ready - Superset of V3 features

[johnleider]

Closed — implementation is production-ready and integrated into Vuetify via PR vuetifyjs/vuetify#22672. Observer pooling tracked in #153 (v0.3.0), docs task tracked separately.