Does Vue Slow down initial page render?

benchmarks.md

Take these two DOMs:

<div id="vue">
  <custom-component>
    <div>
      <p>Here's a static output of how the custom component would render></p>
     </div>
  </custom-component>
</div>

<div id="vue">
  <custom-component>
  </custom-component>
</div>

<div id="deleteMeWhenVueNavBoots">
  <p>Here's a static output of how the custom component would render></p>
</div>

The idea is that you want a DOM that looks initially exactly like what it will when Vue boots up. The question is, which of these two DOMs is more performant? Using Chromse's Performance tab, this is what I found:

Average of 3 page loads with Twig outside the Vue component:

• 12.3ms Loading
• 4743ms Scripting
• 18.03ms Rendering
• 4.133ms Painting
• 145.93ms Other

Average of 3 page loads with Twig inside the Vue component:

• 11.363ms Loading
• 437.33ms Scripting
• 23.23ms Rendering
• 3.33ms Painting
• 178.43ms Other

Seems like it makes zero difference. Vue doesn't parse the DOM in either case. The second DOM has this weakness: you have to have this code inside your CustomComponent:

    mounted() {
      document.getElementById('deleteMeWhenVueNavBoots').remove();
    },

In my testing this perfectly coincides so that there is always only one version of the elment, but it's still a nuissance and feels like a hack.