I’m having an issue with a parent component data not updated when his child send an event :The parent component displays a changelog :

The changelogsStore.ts (simplified):

export const useChangelogStore = defineStore('changelogs', {  
    currentChangelog: null as ChangelogInterface | null,  
}),  
  
actions: {
setCurrentChangelog(changelog: ChangelogInterface) {
    this.currentChangelog = changelog
    },

async modifyChangelog(changelogId: number, changelogData: NewChangelog, accessToken: string) {
      try {
        const updatedChangelog = await changelogsService.updateChangelog(
          changelogId,
          changelogData,
          accessToken
        )
        const index = this.changelogs.findIndex((changelog) => changelog.id === changelogId)
        if (index !== -1) {
          this.changelogs.splice(index, 1, updatedChangelog)
        }
        return updatedChangelog
      } catch (error) {
        console.error('Failed to update changelog:', error)
      }
    },
}

ChangelogDetails.vue (the parent component, simplified) :

//imports
<template>
    <div>{{ changelog? }}</div>

</template>

<script setup lang="ts">

const changelogStore = useChangelogStore()

const changelog = computed(() => changelogStore.currentChangelog)
</script>

I have a changelogsUsecases.ts :

async updateChangelog(changelogId: number, changelogData: NewChangelog, accessToken: string) {
    return await this.store.modifyChangelog(changelogId, changelogData, accessToken)
  }

ModifyChangelog.component.vue (the child component, simplified):

<template>
  <div>
    <form ... @submit.prevent="onSubmit">
      // fields...
       <button type="submit" class="primary-button">
         {{ $t('cta.confirm') }}
       </button>
    </form>
  <div>
</template>

<script lang="ts" setup>
const sendModificationConfirmation = (updatedChangelogData: NewChangelog) => {
  emit('modificationConfirmationSent', updatedChangelogData)
}

const emit = defineEmits(['close', 'modificationConfirmationSent'])
</script>

The issue is that after updating trough the child, my changelog displayed in ChangelogDetails doesn’t get updated. I need to refresh it to see the changes even though the event is correctly send to his parent (I consoled it), and the changes are made, I also inspected my Network and DB.

Isn’t the computed property supposed to be reactive ?

I tried many things to no avail.

I tried to console.log the changelogStore.currentChangelog and after a refresh it’s “null”.

As I reach the ChangelogDetails from another page, the grand parent called ChangelogTable :

const viewDetails = (changelog: ChangelogInterface) => {
  changelogsStore.setCurrentChangelog(changelog)
  router.push({ name: 'changelog-details', params: { id: changelog.id } })
}

The currentChangelog should be set right ? But it’s not persisted as I understand.

Tried computed / refs property, I also tried to force re render (yet didn’t work)