I’m trying to get over the composition API and Pinia with Vue3.

I’m making fetch data from store.My issue is when i add response data to character(state) in fetchCharacterById(action) but when i check character(state) it is empty.is this a bug or any ideas where I’m wrong in the process?

useFetchAPI.js

import axios from "axios";
import { defineStore } from "pinia";
import { computed, ref } from "vue";


export const useFetchAPI = defineStore('fetchAPI',()=>{

       let  characters = ref([])
       let character = ref({})
       let loading = ref(false)
       let errorMessage = ref('')

        let getCharacters = computed(()=>characters.value)
        let getCharacterById = computed(()=>character.value)

        let fetchCharacters = async()=>{
            loading.value = true
             await axios.get('https://rickandmortyapi.com/api/character')
            .then(res=>{
                characters.value=res.data.results
                loading.value = false
            }).catch(err=>{
                errorMessage.value=err.errorMessage
                loading.value=false
            })
        }

        let fetchCharactersByFilter = async(input,status,gender,species)=>{
            loading.value = true
             await axios.get(`https://rickandmortyapi.com/api/character/?name=${input}&status=${status}&gender=${gender}&species=${species}`)
            .then(res=>{
                characters.value=res.data.results
                loading.value = false
            }).catch(err=>{
                errorMessage.value=err.errorMessage
                loading.value=false
            })
        }

        let fetchCharacterById = async(id)=>{
            loading.value = true
             await axios.get(`https://rickandmortyapi.com/api/character/${id}`)
            .then(res=>{
                console.log(res.data)
                character.value = res.data
                loading.value = false
                console.log(character.value)
            }).catch(err=>{
                errorMessage.value=err.errorMessage
                loading.value=false
            })
        }
        
        return {characters,character,loading,errorMessage,getCharacters,getCharacterById,fetchCharacters,fetchCharactersByFilter,fetchCharacterById}
})

CardDetail.vue

<template>
<div>
  
  <Spinner v-if="fetchAPI.loading"/>
  <Error v-else-if="fetchAPI.errorMessage" :errorMessage="fetchAPI.errorMessage" />
  <div
    class="max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg mt-20">
    <div class="relative">
      <img class="w-full h-48 object-cover"
        :src="fetchAPI.getCharacterById.image"
        alt="Profile Image"/>
    </div>
       <ul class="px-6 py-4">
            <li><span class="font-semibold">Name </span><span class="text-gray-600">{{ fetchAPI.getCharacterById.name }}</span></li>
            <li><span class="font-semibold">Gender </span><span class="text-gray-600">{{ fetchAPI.getCharacterById.gender }}</span></li>
            <li><span class="font-semibold">Location </span><span class="text-gray-600">{{ fetchAPI.getCharacterById.location.name }}</span></li>
            <li><span class="font-semibold">Origin </span><span class="text-gray-600">{{ fetchAPI.getCharacterById.origin.name }}</span></li>
            <li><span class="font-semibold">Species </span><span class="text-gray-600">{{ fetchAPI.getCharacterById.species }}</span></li>
       </ul> 
    <div class="px-6 py-4">
      <span
        class="inline-block px-2 py-1 font-semibold text-teal-900 bg-teal-200 rounded-full"
        >{{ fetchAPI.getCharacterById.status }}</span>
    </div>
  </div>

</div>
</template>

<script setup>
import Spinner from './Spinner.vue'
import Error from './Error.vue'
import { useFetchAPI } from "../store/useFetchAPI";
import { onMounted } from 'vue';


const props = defineProps({
      id:{
        type: String,
        required: true,
      }
  })

  const fetchAPI = useFetchAPI();
  console.log('fetch',fetchAPI.getCharacterById)

  onMounted(()=>{
    fetchAPI.fetchCharacterById(props.id)
  })

</script>

<style lang="scss" scoped>
</style>