I have seen some questions in stackoverflow about that subject, but they never really mentioned performances.

Let's say that I have HTML page with a list of Shop, this HTML list is generated by the server in the page HTML.

I would like for each Shop HTML "block" to display a Vue JS <Calendar /> component

HTML :

<div class="list">
  <div class="shop">
    <div>
      <div>
        <div>
          <div>
           <div class="component-placeholder" data-shop-id="x"></div>
    ....
  </div>
  <div class="shop">
    <div>
      <div>
        <div>
          <div>
           <div class="component-placeholder" data-shop-id="x"></div>
    ....
  </div>
  ...
</div>

For JS there is 2 possibility.

Option 1 :

document.querySelectorAll('.component-placeholder').forEach((item) => {
  const shopId = item.getAttribute('data-shop-id');
  new Vue({
    render: (h) => h(Calendar, {
      props: {
        shopId,
      },
    }),
  }).$mount(item);
});

Option 2 :

const elem = document.querySelector('.list');
new Vue({
  el: elem,
  components: {
    Calendar
  },
});

// for this I would replace the component-placeholder with <Calendar shop-id="x" /> in the HTML

My question is, what is the best practice when focusing on performance ?

If the list has 30 Shop, Option 1 would create 30 instance of Vue living together, but Option 2 would also need to add and create all the HTML elements inside its shadow DOM when the component is first loading no ?