[Vuejs]-Vue – change contents in scoped <style>?

I am able to get working results per this answer (How to override scoped styles in Vue components?) with the parent component using a non-scoped which has selectors that overtake the importance of the child component’s styles.
As the answer said, using “#app” as the start of the selector does the job – the stumbling block for me was simply adding a non-scoped style block to the parent component.

However it isn’t so versatile and I’m looking to learn what “putting styles into JS” means and whether it would also provide the method to override the pseudo-element styles.