How to show the same component but with different data when clicking on buttons in a Vue.js component?

Question

Vue.js

Hello, there is a component in which the buttons, when clicking on the button, shows another component (blue), as in this component (blue) when clicking on the buttons in the (green component), pass the same blue component only with different data, for example, what would be in the list there were other list items and other content, in the example (some content). As I understand it, you can make 4 components and show them, but this is probably stupid. Help me make it smart :)
Here is an example:
https://codepen.io/litash/pen/qKvRQx

Answer 1

https://codepen.io/anon/pen/GGLNRp