[Vuejs]-How to specify a place to render a DOM element in Vue.js?

If you want to do it Vue-way it’s possible.

An example is here: http://jsfiddle.net/eywraw8t/335439/

Some additional methods and a computed property are required. But what if you need it to automatically fit without hardcoding?

Here is an example that does that: http://jsfiddle.net/eywraw8t/335504/

But it requires you to name your non-serializable custom fields in a similar way to your serializable fields, in this example:

Serializable: password, email

Non-Serializable: password_confirm, email_confirm

If there is an object in NonSerializableCustomFields that contains password_ or email_ it is appended after it’s Serializable equivalent.

If you have access to the server and can edit your endpoints controllers appropriately, you can also pass order property which says in which order fields should be rendered. You would then map all your fields arrays into one on fetched while adding type property which says if the object is serializable. You would then filter serializable objects before submitting form. Example here: https://codesandbox.io/s/kxvq3rwwv