Во Vue 3, чтобы выделить из компонента отдельно некий функционал с реактивным состоянием, были созданы composable
функции (называемые "функциями", хотя по сути это объект созданный через js замыкание - closure).
Чтобы использовать функционал с реактивным состоянием между несколькими компонентами, можно задействовать js модули либо Pinia/Vuex
сторы.
Иногда нужно нечто среднее - подобную сущность с реактивным стейтом и функционалом на нем, но используемую в нескольких связанных компонентах (например, в Tabs
или каких-то виджетах), - то есть, в некотором локальном контексте. Для этого можно в общем родительском компоненте создать composable
, который передать потомкам - либо через provide/inject
(лучше), либо через props
(не надо).
В этом случае данный реактивный объект будет жить в своем ограниченном контексте и не будет конфликтовать с оставшейся частью проекта.