Vue.js 使用mounted更改数据后，不会更新Vue3 My Provider

我试图从下面这样的父元素提供数据

data(){
    return{
    allData:null,
    ingCollection:null,
    selectedDish:[]
    }
  },

  
  mounted(){
    Promise.all([
      d3.json('data.json'),
      d3.json('ingredientsonly.json')
    ]).then((data)=>{
      this.allData=data[0];
      this.ingCollection=data[1];
      
    })
  },
  components:{sidePanel,centerPiece},

  methods: {
    // receiveIngredients(selected){
    //   let selections = this.allData.filter(d=>{
    //     d.ingredients.includes(selected)
    //   });

    // }
  },
    provide() {
    return{
    allData:this.allData,
    ingCollection:this.ingCollection,
    selectedDish:this.selectedDish,
    receiveIngredients:this.receiveIngredients
    }
  }

但是，在运行挂载的生命周期挂钩之后， 数据已更新，但未更新提供元素

为什么

谢谢

provide（）

仅在初始化时调用一次，在中的引用发生更改时不会调用

相反，您可以

提供一个对象（例如，名为
root
），然后在
mounted（）
中更新该对象的属性：

导出默认值{
提供（）{
返回{
根目录：{
allData:null，
ingCollection:null，
}
}
},
安装的（）{
我保证([
d3.json（'data.json'），
d3.json（'ingredientsonly.json'）
])。然后（（数据）=>{
this.root.allData=data[0]；
this.root.ingCollection=数据[1]；
})
}
}
您能否在codesandbox中创建一个复制来帮助解决问题？