When working with a component that retrieves API data and passes it down to child components, I encountered an issue. I attempted to split the information into separate ref objects for each child component but ran into a problem - reactivity was lost. The new ref object did not update when changes were made in the parent component.
To illustrate this problem, I created an example:
ParentComponent
<template>
<p>All data: {{ data }}</p>
<child-component :data="data"></child-component>
</template>
<script setup>
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue";
let data = ref({
a: {},
b: {},
c: {}, // More properties...
});
setTimeout(() => { // FAKE API
data.value.a = {
name: "prop A",
description: "aaa"
};
data.value.b = {
name: "prop B",
description: "bbb"
};
data.value.c = {
name: "prop C",
description: "ccc"
};
// More properties updated...
}, 2000);
</script>