How to fix the simultaneous call of 2 or more identical functions?

Question

React

Hello, I have an application that has 2 components that can be shown simultaneously on the page together or separately. In the second case, everything is OK, but in the first case, there is a problem of double calling the data request function in the API.
Here is an example of the implementation of two identical requests: https://codesandbox.io/s/14q587x107
Question: how to get rid of this?

Answer 1

store data in vuex

Answer 2

Why are you writing the same code twice?

fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(json => console.log(json));

Transfer the request to the parent (index.js) and pass the received data to the components ( props )
Something like this https://codesandbox.io/s/pkvw21276x