需要创建可复用 Vue composable…

在 Vue 3/Nuxt 3 项目中编写库级可复用 composable，让调用方既能传普通值、ref，也能传 getter，并保持响应式行为可预测。

适用场景

解决思路

1. 确认 composable 的用途、API 设计以及预期的输入与输出。
2. 识别哪些输入参数应当支持响应式，将其类型标注为 MaybeRef 或 MaybeRefOrGetter。
3. 在响应式副作用（watch/watchEffect）内部使用 toValue() 或 toRef() 归一化输入。
4. 使用 Vue 的响应式 API 实现 composable 的核心逻辑。
5. 类型选择规则：只读、兼容 computed 的输入使用 MaybeRefOrGetter。
6. 类型选择规则：需要可写、双向绑定的输入使用 MaybeRef。
7. 类型选择规则：参数可能是函数值（回调/谓词/比较器）时，不要使用 MaybeRefOrGetter，否则可能被误当作 getter 调用。
8. 类型选择规则：DOM/Element 目标若希望支持 computed/派生目标，使用 MaybeRefOrGetter。
9. 当使用 MaybeRefOrGetter 或 MaybeRef 时：在 watcher source 等场景用 toRef() 解析响应式值。
10. 当使用 MaybeRefOrGetter 或 MaybeRef 时：用 toValue() 解析非响应式值。
11. 参考示例 useDocumentTitle：参数为 MaybeRefOrGetter<string>，用 watch(toRef(title), (t) => { document.title = t }, { immediate: true }) 实现只读标题。
12. 参考示例 useCounter：参数为 MaybeRef<number>，用 const countRef = toRef(count) 后通过 countRef.value++ 实现双向可写计数。

适用边界 · 注意事项

• 参数可能是函数值（回调、谓词、比较器）时，不要用 MaybeRefOrGetter，以免误调用该函数。
• 项目不是 Vue 3 及以上或 Nuxt 3 及以上时，不适用本做法。