Laravel + Vue js. How to correctly pass "big" data to a component?

Question

Laravel

Hi all!
I create a multi-page application (like CRM). On pages where Vue is needed, I add a component, like this:

@extends('layouts.app')

@section('content')
    <div class="panel panel-default">
        <div class="panel-heading">Создание пользователя</div>

        <div class="panel-body">
            <user-form
                    :user="{{ $user }}"
                    url="{{ route('api.user.store') }}"
            ></user-form>
        </div>
    </div>
@endsection

It is not uncommon to pass "large" data to forms, for example, when creating a user, you need a list of countries and cities, and this is more than 1000 rows from the database.
Tell me, how will it be correct to pass data to the component? Through props, like this:

<user-form
    :user="{{ $user }}"
    url="{{ route('api.user.store') }}"
    :countries="{{ $countries }}"
    :cities="{{ $cities }}"
></user-form>

or load with ajax in the component itself?
Maybe there are other ways?
Thank you!

Answer 1

It is correct to use autocompletion, and not to issue 1000 lines.
And also choose the country first, and then the cities that are in this country.
And this is not 1000 lines.