title: How to specify a place to render a DOM element in Vue.js?
body: <p>I am building a client in Vue.js for an API. This API gives access to some objects that I am able to create, read, update and delete. </p>
  
  <p>I created a Vue component that fetch the schema of the object I want to access through the API and then generates a form based on how the object is defined API-side.</p>
  
  <p>I also added the possibility to add custom fields to the generated form, in addition to the fields generated from the object schema.</p>
  
  <p>Some of these custom additional fields are serializable (I send them back to the API) and some are not. A use case for this would be the password of a <code>User</code> object. There is the classic <code>password</code> field but I am adding a <code>confirm_password</code> field. This <code>confirm_password</code> field is not sent back to the API, it is only used to verify the user's input in the front-end.</p>
  
  <p>Until now, all this is up and working on my front-end. After this long introduction, <strong>here is my question</strong> :</p>
  
  <p><strong>Is it possible to tell vue to put a specific element just after another one ?</strong> For example, let's says my component is organized as follows :</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div v-for="field in AutoGeneratedFields" &gt;
              //Do something to display the fields
          &lt;/div&gt;
          &lt;div v-for="field in SerializableCustomFields" &gt;
              //Do something to display the fields
          &lt;/div&gt;
          &lt;div v-for="field in NonSerializableCustomFields" &gt;
              //Do something to display the fields
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>So, I have 3 <code>for</code> loops. One to display the fields generated from the object schema, one for the custom fields I want to serialize and one for custom fields I don't want to serialize.</p>
  
  <p>I would like my <code>confirm_password</code> field to be displayed just after my <code>password</code> field, but since they are not created in the same loop, It's very hard to guarantee they will be displayed one after another.</p>
  
  <p><strong>TLDR:</strong> Is it possible, and if yes how, to tell Vue to put my <code>confirm_password</code> field just after my <code>password</code> field even though the <code>confirm_password</code> field might be generated later and potentially after there are already other fields generated between <code>password</code> and <code>confirm_password</code> ?</p>
  
  <p><strong>N.B</strong>: I am using quasar framework, but I didn't find anything there to move element around either.</p>