Design Pattern: The 'Renderless Wrapper' for 3rd Party Library Integration

The Renderless Wrapper pattern encapsulates a non-Vue library (like Google Maps or D3.js) inside a Vue component that manages the library's lifecycle and exposes its state via slots.

Integrating vanilla JS libraries into Vue can be messy. The 'Wrapper' component handles onMounted (initialization), onUnmounted (cleanup), and watch (updating the library when props change). It doesn't render any specific UI, instead providing a 'ref' to the DOM element and the library instance to the parent via a scoped slot. This keeps the library logic strictly isolated.