Vue.js — Using provide-inject to communicate between parent and dynamic child components

I have already written several articles about the parent with dynamic children pattern in Angular. In this article, I would like to write about how you can work on this kind of components in Vue. The parent with dynamic children pattern is a very common pattern for implementing some complicated features, such as third party library integration. Here I would like to explain with an example using Google map:

<GoogleMap v-bind:api-key="key">
  <GoogleMapMarker 
    v-for="(marker…