Ref/Reactive as store

Question

Is it good idea to use ref or reactive as your store?

what I'm talking about is that I will create some JS file, export ref variable from there , so i can use it anywhere in my code

// counter.store.js
export const counter = ref(0)

// counter.vue

<script setup>
import {counter} from './counter.store.js'
</script>

<template> 

<span> {{ counter }} </span>
<button @click="counter++"> Add </button>

</template>

Is there any downside of this?