title: How to improve large Vue component performance
body: <p>I'm currently doing a form editor (like google forms). It's a vue component, basically looking like this:</p>
  <pre><code>&lt;script&gt;
  export default {
    data() {
      return {
        questions: [Array of objects describing form questions]
      }
    }
  }
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;div class=&quot;form-editor&quot;&gt;
      &lt;!-- some interface not related to a specific question (like creating a new question) --&gt;
      &lt;div v-for=&quot;question in questions&quot; :key=&quot;question.id&quot;&gt;
        &lt;input v-model=question.title&gt;
        &lt;!-- more inputs binded to a specific question properties via v-model --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>It works fine, but when the number of questions gets bigger, it experiences huge performance issues. Should i extract logic related to a single question into a separate component to render it in a v-for loop? Or what do i do?</p>