PyCharm Pro Vuejs support, how do I get started after following the help setup instructions?

Hi,

this is a "stupid" beginner's question, but maybe someone can give me a hint to get this running.

After following the PyCharm Professional online help instruction on how to start & run a new vuejs project, I

got the file structure below (screenshot)

Running results in a working project and when I change the index.html file, my browser udates this.

Most vuejs tutorials offer a three pane approach, with a HTML file, a CSS file and a JS file.

An example for a tutorial is: https://codepen.io/AjdinImsirovic/pen/rKYyvE

How can I integrate examples like this into the PyCharm Vuejs startup example so that I can begin learning Vuejs using PyCharm properly?

Note: I found out that I can put ".html" & ".js" files in the "public" folder and this lets me run the examples - but if I put "Vue" code in there PyCharm underlines it as an error, so there must be a better, correct way where to put the files and how to name them.