<p dir="auto">Hello,<br>
in order to duplicate an object with all its children, I had to use a jQuery function, please is there a better way in Vue? I am using Vue 0.12.1</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="duplicateThis: function (field) {
    var currentField = this.fields[field.index];

    var insertField = {
        name: currentField.name,
        type: currentField.type,
        description: currentField.description,
        options: $.extend(true, {}, currentField.options),
        required: currentField.required
    };

    this.fields.splice(field.index + 1, 0, insertField);
}"><pre class="notranslate"><code class="notranslate">duplicateThis: function (field) {
    var currentField = this.fields[field.index];

    var insertField = {
        name: currentField.name,
        type: currentField.type,
        description: currentField.description,
        options: $.extend(true, {}, currentField.options),
        required: currentField.required
    };

    this.fields.splice(field.index + 1, 0, insertField);
}
</code></pre></div>
<p dir="auto">Thank you</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.11</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/yrqt02kj/1/" rel="nofollow">https://jsfiddle.net/yrqt02kj/1/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto"><code class="notranslate">transition-group</code>  renders the component twice (and the second rendering is done without parsed "{{variable}}").<br>
If we just remove <code class="notranslate">transition-group</code> parent at all, it works as expected and there is no duplicated content.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">there should not be the duplicated content (with unrendered variable tag)</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">it shows the content twice</p>