Obtengo datos de API que quiero pasar como apoyo a un componente secundario

Componente principal

 <template> <div class="dashboard"> <items name="Admins" value={{data.items.hubs}} bgColor="#a80c0c" /> </div> </template> import Items from './Items.vue' import { Admin } from '@/services/AdminService'; export default { name: "AdminDashboard", components: { Items }, setup(){ onMounted(() => { showLoader(true); Admin.getDashboardItems() .then((response) => { data.items = response.data.data }) .catch((error) => { }) .finally(() => { showLoader(false); }); }); return { data } } }

Obtuve el valor que necesito de la API y lo pasé a data.items

Si lo muestro en el componente principal.

Funciona bien pero en el componente secundario.

No funciona

Componente hijo

 <template> <div class="col-md-3"> <div class="items" :style="{ backgroundColor: bgColor }"> <div class="d-flex space-between"> <div></div> <div> <h5>{{ value }}</h5> <span>{{ name }}</span> </div> </div> </div> </div> </template> <script> export default { name: "Items", props: ["bgColor", "value", "name"] } </script>

Los componentes secundarios muestran {{data.items.hubs}} en lugar del valor de hub

Los datos de la API

 {"data":{"users":1,"incubatees":1,"hubs":2,"investors":1,"events":0,"admins":3,"programs":0}}