I’m stucked on data refreshing issue with Vue3 & xState.

(I do not think that xState is involved in this issue, but I’d rather mention it)

Data is not refreshed in child component when data is changed by external process (in my case, xState status change).

• In my parent component, displayed data [OUTSIDE Statuses] is up to date, after external change on state.context.documents
• In my child component, updates [INSIDE Statuses] are not displayed, except if I change anything else and it re-draws DOM.

Why child component is not detecting data change ?
It tastes like a proxy issue but I do not succeed in finding the right way to embed my data in sub component with a full-reactive behavior.

Parent component

<div class="results-container">
  [OUTSIDE statuses]: {{state.context?.documents?.map((doc) => doc._detailLoaded)}}
  <DocumentList :documents="state.context?.documents" />
</div>

const searchMachine = useSearchStore().actor;
const { state } = useActor(searchMachine);

DocumentList Child component:

  [INSIDE Statuses]: {{documents?.map((doc) => doc._detailLoaded)}}
  <ul>
    <li v-for="(doc, idx) in documents">
      <span class="label">{{document.title}}</span>
      <div class="details" v-if="{{document._detailLoaded}}">
        ...
      </div>
      <button @click="loadDetails">view details</button>
    </li>
  </ul>
</template>

...

// Search Machine context
const searchMachine = useSearchStore().actor;
const { send } = useActor(searchMachine); 
...

const properties = defineProps<{
  documents: DocumentModel[] | undefined;
}>();
const loadingStatuses = computed<boolean[]>(() => {
  return properties.documents?.map((d) => d._detailLoaded ?? false) ?? [];
});

const loadDetails = () => {

  // Will change
  send({type: 'COMPLETE_DOCUMENT'});

};

Regards