When data takes time to load in vue, data not available into different child component

Question

`I am new in vue and facing issues here. My top parent is this page code which mentioned below and there is 2 child component. it is like this {CURRENT PAGE..} > {FancyButton} > {AnotherViewChild} I want to use provide and inject to pass value from current parent component to grand child AnotherViewChild component which can be possible with bellow code, no issues. but If I use setTimeOut to delay to get message, I am getting [] value.

How I can get solution for this? Normally It can happen when large data coming from backend. My demo message data is like.. message.value = [{id: 1, name: "ddl"},{id: 2, name: "Omen ser"},{id: 3, name: "natural sea"},...]`

<script setup lang="ts">
import { ref, provide, computed, onMounted } from 'vue'
import FancyButton from './FancyButton.vue'
let someValue: any[]
  const message = ref<any[]>([])
  
  message.value = [
      {id: 1, name: "ddl"},
      {id: 2, name: "Omen ser"},
      {id: 3, name: "natural sea"},
      {id: 4, name: "Whale is swiming"},
      {id: 5, name: "Best food in"},
      {id: 6, name: "Better choice"},
      {id: 7, name: "What is next?"},
      {id: 8, name: "Other Option"},
    ]
  
  someValue = []
  onMounted(() => {
    setTimeout(() => {
    message.value = [
      {id: 1, name: "ddl"},
      {id: 2, name: "Omen ser"},
      {id: 3, name: "natural sea"},
      {id: 4, name: "Whale is swiming"},
      {id: 5, name: "Best food in"},
      {id: 6, name: "Better choice"},
      {id: 7, name: "What is next?"},
      {id: 8, name: "Other Option"},
    ]
  }, 2000)
  })
  
  
  console.log('-------->', message.value)
  provide('message', message.value)
  


computed(() => {
  console.log('-------->', someValue)
})


</script>

<template>
  <div style="border: 1px solid purple">
    <!-- <h1>Hello</h1>
    <h2 style="color: red">{{ count }}</h2>
    <button @click="addButton" style="color: red">Add</button> -->
    
    <FancyButton>
       <AnotherViewChild />
      <div class="role">Role</div>
      <div class="role">Role</div>
    </FancyButton>
  </div>

</template>

<style scoped>
.role {
  color:green
}
.read-the-docs {
  color: #888;
}
</style>

I am expecting if I use settimeout, data should be available after mentioned timeframe in message.value and can show in my child component <AnotherViewChild /> using provide, inject. Please help. Expected screenshot

Answer 1

Issues resolved by placing provide() in the root with 'message' provide('message', message) // deleted .value

Answer 2

If I understand correctly and your goal is to delay the data between parent component & grand-child, I would do:

onMounted(() => {
  message.value = [
  {id: 1, name: "ddl"},
  {id: 2, name: "Omen ser"},
  {id: 3, name: "natural sea"},
  {id: 4, name: "Whale is swiming"},
  {id: 5, name: "Best food in"},
  {id: 6, name: "Better choice"},
  {id: 7, name: "What is next?"},
  {id: 8, name: "Other Option"},
];
  setTimeout(() => {
    provide('message', message.value)
   }, 2000);

});

Because if you assign the value of message.value inside a setTimeout, the provide() function will be called before message.value is being assigned. So in other words, when your component mounts:

1. provide() will be called with message.value = [];
2. message.value will be assigned a value 2 seconds later, after provide() was called