How to change html structure using vue.js?

Question

css

You need to release a one-page SPA site, there will be a sidebar on the left, content on the right:

When you click on different elements of the sidebar, the content on the right will change, there will be graphics in one content, and a set of numerical parameters in the third table. I have a bad idea how to implement this with vue.js? Maybe the html structure needs to be changed?

Answer 1

You would do well to learn Vue to get started, at least a little.
In short,
install vue-router .
links in the sidebar - router-link, content - router-view.
There are a lot of tutorials and code examples on the web.
As an alternative - just toggle the component in the content block. But this is no longer a SPA, but some tabs will turn out.