vue3使用hook组件传值的探讨

data.js

import { ref, reactive } from "vue"

export default ref(0)

componentA.vue

<script setup>
import data from "data.js"
</script>

<template>
    <div>{{ data }}</div>
    <button @click="data++">add</button>
</template>

componentB.vue

<script setup>
import data from "data.js"
</script>

<template>
    <div>{{ data }}</div>
    <button @click="data++">add</button>
</template>

以上有一个文件使用vue3响应式包裹一个数据，把这个数据引入到其他任意组件中使用，并在任意引入了这个数据的组件中改变他的值。其他引入了这个数据的组件里的值也会改变（这个数据的值在多个组件中会保持一致）。这样来看，是否也是组件传值的一种方式呢？而且我觉得用在兄弟组件的传值上代码写法也简单。

因为我看网上说组件传值都没有提到这个，不知道是否可以一用。希望网友能够解答一下。