Pinia State Management Issue

Hi I'm using Vue in Laravel application I've created a store in pinia in composition api pattern . It's a simple counter app but when I'm updating the value it does not gets updated at that time when I revisit the component then it showing updated value. Below is the code

import { defineStore } from "pinia";
import { ref } from "vue";
export const useCounterStore = defineStore("counter", () => {
    const counter = ref(0);
    function incrementCounter() {
        console.log("Incrementing counter");
        counter.value++;
    }
    function decrementCounter() {
        counter.value--;
    }
    return {
        counter,
        incrementCounter,
        decrementCounter,
    };
});

Here how I'm using it in component

<script setup>
import { useCounterStore } from "@/stores/counter.js";
const { counter, incrementCounter } = useCounterStore();
function handleClick() {
    console.log("clicked");
    incrementCounter();
}
</script>
<template>
    <button @click="handleClick">Pressed {{ counter }}</button>
</template>