I am developing a SPA side project using the MVC pattern in vanilla JavaScript. My goal is learning how the MVC pattern can be applied.

It is a simple e-commerce that shows a list of goods to sell. I have different components and each component has a Model a View and a Controller. For instance, one component allows you to select, add, edit and delete a list of products. I have another component (with its own Model, View and Controller) that allows you to do a completely different thing BUT it is displayed a bit differently based on the product that is selected in the previous component.

If every component has its own MVC, how can the state of a component impact another one

Thank you.