<p dir="auto">I am writing a simple todo list component with:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Vue.component('todo-list', {
    props: ['todos'],
    template:
    `&lt;ol&gt;
        &lt;li v-for=&quot;(td, ix) in todos&quot;&gt;
            {{td}}
            &lt;button title=&quot;delete&quot;  @click=&quot;todos.splice(ix,1)&quot;&gt;X&lt;/button&gt;
            &lt;button title=&quot;move up&quot; @click=&quot;todos.swap(ix,ix-1)&quot; v-show=&quot;ix&gt;0&quot;&gt;^&lt;/button&gt;
        &lt;/li&gt;
    &lt;/ol&gt;`,
})"><pre class="notranslate"><span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-s">'todo-list'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">props</span>: <span class="pl-kos">[</span><span class="pl-s">'todos'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>:
    <span class="pl-s">`&lt;ol&gt;</span>
<span class="pl-s">        &lt;li v-for="(td, ix) in todos"&gt;</span>
<span class="pl-s">            {{td}}</span>
<span class="pl-s">            &lt;button title="delete"  @click="todos.splice(ix,1)"&gt;X&lt;/button&gt;</span>
<span class="pl-s">            &lt;button title="move up" @click="todos.swap(ix,ix-1)" v-show="ix&gt;0"&gt;^&lt;/button&gt;</span>
<span class="pl-s">        &lt;/li&gt;</span>
<span class="pl-s">    &lt;/ol&gt;`</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">For this to work I need (in core/observer/array.js) something like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Array.prototype.swap = function(x,y) {
  var t = this[x]
  this[x] = this[y]
  this[y] = t
}
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

/**
 * Intercept mutating methods and emit events
 */
;[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'swap', // added
  'sort',
  'reverse'
]"><pre class="notranslate"><span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-en">swap</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">,</span><span class="pl-s1">y</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">t</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">[</span><span class="pl-s1">x</span><span class="pl-kos">]</span>
  <span class="pl-smi">this</span><span class="pl-kos">[</span><span class="pl-s1">x</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">[</span><span class="pl-s1">y</span><span class="pl-kos">]</span>
  <span class="pl-smi">this</span><span class="pl-kos">[</span><span class="pl-s1">y</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">t</span>
<span class="pl-kos">}</span>
<span class="pl-k">const</span> <span class="pl-s1">arrayProto</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span>
<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">arrayMethods</span> <span class="pl-c1">=</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-s1">arrayProto</span><span class="pl-kos">)</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * Intercept mutating methods and emit events</span>
<span class="pl-c"> */</span>
<span class="pl-kos">;</span><span class="pl-kos">[</span>
  <span class="pl-s">'push'</span><span class="pl-kos">,</span>
  <span class="pl-s">'pop'</span><span class="pl-kos">,</span>
  <span class="pl-s">'shift'</span><span class="pl-kos">,</span>
  <span class="pl-s">'unshift'</span><span class="pl-kos">,</span>
  <span class="pl-s">'splice'</span><span class="pl-kos">,</span>
  <span class="pl-s">'swap'</span><span class="pl-kos">,</span> <span class="pl-c">// added</span>
  <span class="pl-s">'sort'</span><span class="pl-kos">,</span>
  <span class="pl-s">'reverse'</span>
<span class="pl-kos">]</span></pre></div>
<p dir="auto">It works when I (lazily) fixed dist/vue.js, but did not run the tests.<br>
I think it is worth to add swap this way because notify() is run just once, am I wrong?</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://github.com/dxvladislavvolkov/vue-issue">https://github.com/dxvladislavvolkov/vue-issue</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Clone repo</li>
<li>Run npm i</li>
<li>Run npm run serve</li>
<li>Open console. You see the wrong parent element</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">I want to see my-comp2 as the parent of my-comp</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">I get #app element as the parent of my-comp</p>
<hr>
<p dir="auto">To reproduce I create two js files and create my components using extend. Then I import my files to index js and create global components using Vue.component. After it, I get the wrong parent of a component when I wrap my-comp</p>