title: Vue3-My provide is not updated after changing the data using mounted
body: <p>I tried to provide my data from a parent element like below.</p>
  <pre><code>data(){
      return{
      allData:null,
      ingCollection:null,
      selectedDish:[]
      }
    },
  
    
    mounted(){
      Promise.all([
        d3.json('data.json'),
        d3.json('ingredientsonly.json')
      ]).then((data)=&gt;{
        this.allData=data[0];
        this.ingCollection=data[1];
        
      })
    },
    components:{sidePanel,centerPiece},
  
    methods: {
      // receiveIngredients(selected){
      //   let selections = this.allData.filter(d=&gt;{
      //     d.ingredients.includes(selected)
      //   });
  
      // }
    },
      provide() {
      return{
      allData:this.allData,
      ingCollection:this.ingCollection,
      selectedDish:this.selectedDish,
      receiveIngredients:this.receiveIngredients
      }
    }
  </code></pre>
  <p>However, after mounted lifecycle hook was run,
  data is updated while provide elements were not updated.</p>
  <p>Why is it?</p>
  <p>Thank you</p>