Vue 3 - slow mounting with lots of regular HTML elements

Hi,
I am building a website using PHP with Laravel and Vue.js This is not a SPA but rather I inject some interactive widgets on the pages that are server-side rendered.

One of the pages is a catalog for browsing some board games. I have a single Root component that I mount on this page. There is a div there that contains about 700 elements (input checkbox) that looks similar to this (some parts are omitted for brevity).

<div ref="publishersContainer" class="...">
    @foreach($publishers as $publisher)
        <div class="...">
            <input type="checkbox"
                   id="{{ $publisher->name }}"
                   name="publishers[]"
                   value="{{ $publisher->name }}"
                   class="...">
            <label for="{{ $publisher->name }}">{{ $publisher->name }}</label>
        </div>
    @endforeach
</div>

Those checkboxes allow the user to filter games made by selected publishers. Notice that the @ foreach directive is part of Blade (from Laravel) and not part of Vue, which means that the entire list of checkboxes is already present when Vue starts mounting the app.

When the div is present, the performance tab inside the Vue devtools shows me that it takes a lot of time to compile and mount the component.
image

But when I remove the div entirely, the mounting is really fast and there is no problem.

Also, when I remove the ref attribute, it does not help.

Is there anything I can do about it? Inside the component the mount() function is empty, so there isn’t really anything that could slow down the mounting process other than the aforementioned div.