I have a simple pinia state that has a setter method:

export const usePetStore = defineStore({
  id: 'pet',
  state: () => ({
    pet: 'test'
  }),
  actions: {
    setPet(newPet) {
      this.pet = newPet
    }
  }
})

and I have some code in HomeView.vue component with following code that sets the “pet” value:

<script setup>
import CreatePet from '@/views/home/CreatePet.vue'
import { ref, onMounted, computed, inject } from 'vue'
import { useAuthStore, usePetStore } from '@/stores/auth'

let showCreatePetDialog = ref(false)
let isLoading = ref(true)

onMounted(async () => {
  const authStore = useAuthStore()
  const petStore = usePetStore()
  const user = computed(() => authStore.user)
  const pet = computed(() => petStore.pet)
  if (user.value) {
    if (!pet.value) {
      console.log('Pet info not yet loaded')
      petStore.setPet({ id: 4094, name: 'Astor' })
    } else {
      console.log('Pet info already exists in session')
    }
  }
  console.log(pet.value)

  showCreatePetDialog.value = false
  isLoading.value = false
})
</script>

but the value from “console.log(pet)” shows the value “test”, and not the one I set it to via “setPet”. What am I misunderstanding here with Pinia state?