Vue components inside Rails ERB files load slower than rest of page

Question

I've decided to migrate parts of my Rails frontend into Vue components, and am using them in my ERB files like so:-

<% @events.each do |event| %>
  <event-row
    :event="<%= event.to_json %>"
    :event-title="'<%= event.title %>'"
    :event-description="'<%= event.title %>'"
    :organisation-name="'<%= event.organisation.name %>'"
    :organisation-image-url="'<%= url_for(event.organisation.image) %>'"
    :event-topics="<%= event.topics.to_json %>"
    :event-month="'<%= event.date.strftime("%B") %>'"
    :event-day="'<%= event.date.day %>'"
    :event-day-number="'<%= event.date.strftime("%A") %>'"
    :event-url="'<%= organisation_event_path(event.organisation.friendly_id, event.friendly_id) %>'"
    :org-url="'<%= organisation_path(event.organisation.friendly_id) %>'"
  ></event-row>
<% end %>

Everything is working nicely, aside from the fact that the above code renders slower than the rest of my page.

This only happens occasionally, but every time, the Rails ERB code is always first to load, whilst the Vue components list is delayed.

Does anyone know what the cause could be? This is in my development environment (not yet tested in prod).