Vue 提供/注入 - 具有多个值的单个对象与每个值的多个提供者

Question

在 Vue 的关于对组合 API (see link) 使用提供/注入的文档中，他们建议使用单独的 provide 来传递可以更新原始值的函数。

const location = ref("North Pole");
const updateLocation = () => {
  location.value = "South Pole";
};
provide("location", readonly(location));
provide("updateLocation", updateLocation);

是否有理由采用这种方法来提供一个像这样组合值的对象：

const location = ref("North Pole");
const updateLocation = () => {
  location.value = "South Pole";
};

provide("location", {
  location: readonly(location),
  updateLocation,
});
// or...?
provide("location", reactive({
  location: readonly(location),
  updateLocation,
}));

我还没有机会深入研究，但从表面上看，将它们结合起来似乎会更好，因为您管理的密钥较少，所有相关的东西都捆绑在一起，您可以很好地解构这些值。反应性是否不起作用？

Vue 推荐的最佳方法是什么，还是将对象组合到单个 provide 语句中是否有好处？