Add component in a separate script

[ianclo]

Hi, i use quasar UMD framework v1.0 in a AspNet Core application. I have a shared page where i use a layout page:

<div id="main-quasar">
        <template>
            <q-layout view="hHh lpR fFf">
                <q-header elevated class="bg-primary text-white">
                    <q-toolbar>
                        <q-toolbar-title>
                            <q-avatar>
                                <img src="https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg">
                            </q-avatar>
                            Title
                            <q-btn type="a" href="@UrlHelperExtensions.Action(Url,"index","home")" label="Home"></q-btn>
                        </q-toolbar-title>
                    </q-toolbar>
                </q-header>
                <q-page-container>
                      @RenderBody()
                </q-page-container>
                <q-footer elevated class="bg-grey-8 text-white">
                    <q-toolbar>
                        <q-toolbar-title>
                            <q-avatar>
                                <img src="https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg">
                            </q-avatar>
                            Title
                        </q-toolbar-title>
                    </q-toolbar>
                </q-footer>
            </q-layout>
        </template>
    </div>
    <script>

        new Vue({
            el: '#main-quasar',
            data: function () {
                return {
                }
            },
            methods: {
               
                }
            },
        })
    </script>

The body page is in a different file with a quasar component and related script part:

<div id="q-login-form">
    <div class="q-pa-md" style="max-width: 400px">
        <form id="account" method="post">
            <q-input filled
                     label="Your email"
                     v-model="email"
                     typeof="email"
                     hint="email"
                     name="Input.Email"></q-input>
            <q-input filled
                     v-model="password"
                     type="password"
                     name="Input.Password"
                     label="password"
                     lazy-rules>
            </q-input>
            <div>
                <q-btn label="Submit" type="submit" color="primary"></q-btn>
                <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm"></q-btn>
            </div>
        </form>
</div>
</div>
<script>
    new Vue({
        el: '#q-login-form',
        data() {
            return {
                email: '',
                password:''
            }
        },
        methods: {

            onReset() {
                this.name = null
                this.age = null
                this.accept = false
            }
        }
    })
</script>

But the Vue nested does not work. How can insert nested component in a shared page with different file?