How to implement a click in a Vue.js component that shows another component?

Question

Vue.js

How it is possible to implement only not "inline" this task?
It is necessary to hide the current one on click in the component and that the next component would be shown. I tried, but nothing works. As I understand it, the components live their own lives if they do not specify anything and do not see the neighboring ones. I do not understand.
In the example, you need to show the red component on the "show red" button and change it back to green. Help.
https://codepen.io/litash/pen/qKvRQx

Answer 1

dynamic component switching
https://jsfiddle.net/e68y0fwc/