Why do click and other events fire 2 times inside vuejs id=app tag?

Question

Vue.js

hello, I started translating the site to vujs, there is a button

<button type="button"
id="js-add-city"
data-action ="{{ route('addCity', ['account' => Route::input('account'), 'region' => $region['id']]) }}"
>
 <span class="glyphicon glyphicon-plus"></span>
 Добавить город
 </button>

and there is a click handler

$(document).ready(function() {
    $(document.body).on('click', '#js-add-city', function () {

        var $button = $(this);
.....

    });
});

for some unknown reason, this event is called, and others 2 times each, exactly when I wrap it in vuejs in the base blade template

<div id="app">
@yield('content')
</div>

if I do it inside the template, then everything works as it should

@extends('layouts.base')

@section('content')
    <div id="app">
.....
    </div>

Answer 1

inside the template, a file with js was connected,
if it was placed inside the vue root tag, then a double call occurs, the file was connected to the stack
@push('scripts')
@endpush