<h3 dir="auto">Version</h3>
<p dir="auto">2.5.17</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codesandbox.io/s/zzq75rm38x" rel="nofollow">https://codesandbox.io/s/zzq75rm38x</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Create a component, A, which makes use of <code class="notranslate">$listeners</code> in the template somehow.<br>
Create a component, B,  that includes component A, so that an instance of B is parent of an instance of A.<br>
Attach an event listener to A in B.<br>
Update state in component B somehow.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Component B should update, and component A should be unaffected.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Component A is updated. It is rendered again, and the update lifecycle hooks are triggered.</p>
<p dir="auto">I'm new with Vuejs and probably my issue is a dummy one, but I've not still realized how to fix it.</p>
<p dir="auto"><strong>Situation</strong>: I have a collection of objects which I've sorted with lodash:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  computed: {
    sortedAlerts: function() {
      return _.orderBy(this.filteredAlerts, 'createdAtUtc', 'desc');
    }
  }
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-c1">computed</span>: <span class="pl-kos">{</span>
    <span class="pl-en">sortedAlerts</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">orderBy</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">filteredAlerts</span><span class="pl-kos">,</span> <span class="pl-s">'createdAtUtc'</span><span class="pl-kos">,</span> <span class="pl-s">'desc'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">And iterating with <code class="notranslate">v-for="alert in sortedAlerts"</code>.</p>
<p dir="auto">I also display one of the object property with the usage of Vuejs component:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="components: {
    'alert-title': {
        props: ['model'],
        computed: {
            indicatorTitle: function() {
                return this.alert.indicator.title.toLowerCase();
            },
            conditionTitle: function() {
                return this.alert.condition.title.toLowerCase();
            }
        },
        template:'&lt;span&gt;&lt;i&gt;{{indicatorTitle}}&lt;/i&gt; is {{conditionTitle}} {{alert.amount}}&lt;/span&gt;',
        data: function() {
            return {
                alert: this.model
            }
        }
    }
}"><pre class="notranslate">components: <span class="pl-kos">{</span>
    <span class="pl-s">'alert-title'</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">props</span>: <span class="pl-kos">[</span><span class="pl-s">'model'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">computed</span>: <span class="pl-kos">{</span>
            <span class="pl-en">indicatorTitle</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">alert</span><span class="pl-kos">.</span><span class="pl-c1">indicator</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">.</span><span class="pl-en">toLowerCase</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-en">conditionTitle</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">alert</span><span class="pl-kos">.</span><span class="pl-c1">condition</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">.</span><span class="pl-en">toLowerCase</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-c1">template</span>:<span class="pl-s">'&lt;span&gt;&lt;i&gt;{{indicatorTitle}}&lt;/i&gt; is {{conditionTitle}} {{alert.amount}}&lt;/span&gt;'</span><span class="pl-kos">,</span>
        <span class="pl-en">data</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-k">return</span> <span class="pl-kos">{</span>
                <span class="pl-c1">alert</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">model</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">like this <code class="notranslate">&lt;span is="alert-title" v-bind:model="alert"&gt;&lt;/span&gt;</code>.</p>
<p dir="auto">Finally, when I add new objects into this array (which going to be the first elements in ordered array), the <code class="notranslate">alert-title</code> component do not display newly added object in a proper way (but continue to display the <strong>previous one</strong>, which now is actualty the second and duplicate).</p>
<p dir="auto">Page refresh is fixing this situation, but I'm pretty sure that the code have an issue.</p>
<p dir="auto">I know it's not too clear but I hope someone could figure out what's wrong with it.</p>
<p dir="auto">Let me know if an example should also be provided.</p>
<p dir="auto">Thank you.</p>