In my VueJS application, I have a composable file that fetches information from an API and displays it in a table within two components simultaneously:
// Here is a basic example of the composable implementation:
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
}
}
Both document-table and document-billing-dialog components utilize this composable:
<template>
<div>
<document-table /> // Composable used here
<document-billing-dialog /> // Composable also used here
</div>
</template>
The usage of the composable in both components results in the unintentional behavior of functions being triggered twice and shared state values being interconnected. Is there a way to isolate instances of a composable for individual components?