How to use the window.app object?

In a Laravel 5.4 install, the examples show an app object created in r/a/js/app.js:

const app = new Vue({
    el: '#app'
});

And I've built a few components which work fine.

But now, I'm trying to implement an "object oriented form", as described in the (Vue video series) [ https://laracasts.com/series/learn-vue-2-step-by-step ], into this form I have, which already includes some of these custom components I made.

My blade looks something like:

    <div id="app">
        <h1 class="contract-header-h1">
            Edit a {{ trans('contracts.contract_short') }}
        </h1>
        <form action="{{ route('contract.update', ['id' => $contract->id]) }}" @onSubmit.prevent="onSubmit" class="" method="POST">

            <div class="form-group">
                <username-list field_name="securedBy" user_id="{{$contract->securedBy_user->id}}">
                </username-list>
            </div>
        </form>
    </div>

Now, I wouldn't want to create a new div#app2 for this form, so I'm thinking that maybe I ought to use the already-existing app object, and simply add properties. Something along the lines of:

<script>
            window.app.methods = {
                onSubmit() {
                    alert('Submitted');
                }
            }
</script>

But that yields:

Property or method "onSubmit" is not defined 

So my questions are:

• Am I going about this the right way? I mean, should I try to re-use that app object?

• If so, or not, then how would I include a one-off vue in a form/page that already includes vue components without creating a separate el: binding?