How to properly use components with routing?

Question

JavaScript

Hello.
I can't figure out how to use components and routing correctly.
I want to use routing from vuejs, my logic is that when going to "/main" for example, vuejs will load the parent component in id="content". will contain local components with their own templates.
I don't quite understand how to do it right.
I read the documentation several times, but still, I could not understand: from
HTML:

<div class="center-n" id="content">
        <main-pg>
        </main-pg>
    </div>

vuejs:

var live = Vue.component('main-pg', {
    template: '#live'
});

new Vue({
    el: '#content',
})

and everything stalled.
Please explain to whom it is not difficult: 3
Thanks in advance!