<p dir="auto">Sorry, I'm not sure if I should open this in the Vue CLI or the Vue CLI Webpack template repository. I'll move them if necessary.</p>
<p dir="auto">The problem is, Vue triggers the <code class="notranslate">componentchanged</code> event of an <a href="https://aframe.io/docs/core/entity.html#Events" rel="nofollow">a-frame</a> component forever.</p>
<p dir="auto">This is the code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;a-scene&gt;
  &lt;a-entity&gt;
    &lt;a-camera @componentchanged=&quot;onChange()&quot;&gt;
    &lt;/a-camera&gt;
  &lt;/a-entity&gt;
&lt;/a-scene&gt;

&lt;script&gt;
export default {
  methods: {
    onChange: function () {
     console.log('Changed!')
  }
}
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;a-scene&gt;
  &lt;a-entity&gt;
    &lt;a-camera @componentchanged="onChange()"&gt;
    &lt;/a-camera&gt;
  &lt;/a-entity&gt;
&lt;/a-scene&gt;

&lt;script&gt;
export default {
  methods: {
    onChange: function () {
     console.log('Changed!')
  }
}
&lt;/script&gt;
</code></pre></div>
<p dir="auto">Here's a demo: <a href="https://desolate-island-90618.herokuapp.com/#!/5EfhFj+R3DY1zo8JIGGQhosrSqn7p0t8pON9y5asxnM=" rel="nofollow">https://desolate-island-90618.herokuapp.com/#!/5EfhFj+R3DY1zo8JIGGQhosrSqn7p0t8pON9y5asxnM=</a></p>
<p dir="auto">This only happens in <code class="notranslate">.vue</code> files. The problem doesn't occur in a simple <code class="notranslate">new Vue</code> instance: <a href="http://codepen.io/anon/pen/PNQdwO" rel="nofollow">http://codepen.io/anon/pen/PNQdwO</a></p>
<p dir="auto">Sorry, I'm not sure if I should open this in the Vue CLI or the Vue CLI Webpack template repository. I'll migrate them if necessary.</p>
<p dir="auto">The problem is, Vue triggers the <code class="notranslate">componentchanged</code> event of an <a href="https://aframe.io/docs/core/entity.html#Events" rel="nofollow">a-frame</a> component forever.</p>
<p dir="auto">This is the code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;a-scene&gt;
  &lt;a-entity&gt;
    &lt;a-camera @componentchanged=&quot;onChange()&quot;&gt;
    &lt;/a-camera&gt;
  &lt;/a-entity&gt;
&lt;/a-scene&gt;

&lt;script&gt;
export default {
  methods: {
    onChange: function () {
     console.log('Changed!')
  }
}
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;a-scene&gt;
  &lt;a-entity&gt;
    &lt;a-camera @componentchanged="onChange()"&gt;
    &lt;/a-camera&gt;
  &lt;/a-entity&gt;
&lt;/a-scene&gt;

&lt;script&gt;
export default {
  methods: {
    onChange: function () {
     console.log('Changed!')
  }
}
&lt;/script&gt;
</code></pre></div>
<p dir="auto">Here's a demo: <a href="https://desolate-island-90618.herokuapp.com/#!/5EfhFj+R3DY1zo8JIGGQhosrSqn7p0t8pON9y5asxnM=" rel="nofollow">https://desolate-island-90618.herokuapp.com/#!/5EfhFj+R3DY1zo8JIGGQhosrSqn7p0t8pON9y5asxnM=</a> (see console).</p>
<p dir="auto">This only happens in <code class="notranslate">.vue</code> files. The problem doesn't occur in a simple <code class="notranslate">new Vue</code> instance: <a href="http://codepen.io/anon/pen/PNQdwO" rel="nofollow">http://codepen.io/anon/pen/PNQdwO</a></p>
<p dir="auto">(<em>Note:</em> I also tested this code in a fresh <code class="notranslate">vue init webpack</code> project. The problem, seem to occur in <code class="notranslate">.vue</code> files.)</p>
<p dir="auto">(<em>Note 2:</em> The event is being triggered even if the <code class="notranslate">oldData</code> is the same as the <code class="notranslate">newData</code>.)</p>