Tengo un archivo componible en mi aplicación VueJS:

 // simple example of a composable that fetch some information from API and shows that information 
// in a table in two components at the sime time
export function useDatatable () {
 const table = ref({
 headers: [...],
 items: [],
 someValue: ''
 })

 async function getDocuments () {
 const { data } = await $axios.get('/documents')
 table.value.items = data
 }

 return {
 table,
 getDocuments
 }
}

Entonces tengo múltiples componentes que usan este componible al mismo tiempo:

 <template>
 <div>
 <document-table /> // composable is used here
 <document-billing-dialog /> // composable is used here too
 </div>
</template>

Luego, en ambos componentes ( document-table y document-billing-dialog ) utilizo este componible así:

 <template>
 <div>
 {{ table.someValue }}
 </div>
 <v-table :items="table.items" />
 <v-btn @click="getDocuments">
 Reload table
 </v-btn>
 // other components
</template>

<script>
 import { useDatatable } from '~/composables/useDatatable'
 // other imports

 export default defineComponent({
 setup () {
 const { table, getDocuments } = useDatatable()

 onMounted(() => { getDocuments() })

 return {
 table,
 getDocuments
 }
 }
 })
</script>

Sin embargo, cuando 1 componente llama a la función getDocuments , se llama dos veces porque se usa en dos componentes al mismo tiempo.

Otro ejemplo es que si cambio el valor de table.value.someValue = 'something' cambia en ambos componentes.

¿Hay alguna forma de tener múltiples instancias de un componible al mismo tiempo sin compartir el estado?