title: this property interactivity is triggering for all individual component instances
body: <p>I'm trying to toggle the interactivity on an emit event to only trigger that <em>specific</em> component instance, but when I click, it emits to all. For example:</p>
  <pre><code>// Favorite.vue
      export default {
  
          props: ['reply'],
  
          data() {
              return {
                  isFavorited: this.reply.isFavorited,
              }
          },
  
          methods: {
              toggle() {
                  if (this.isFavorited) {
                      axios.delete('/replies/' + this.reply.id + '/favorites');
                      this.isFavorited = false;
                      window.events.$emit(&quot;selfRemoveLike&quot;, 1);
                  } else {
                      axios.post('/replies/' + this.reply.id + '/favorites');
                      this.isFavorited = true;
                      window.events.$emit(&quot;selfAddLike&quot;, 1);
                  }    
              }
          }
      }
  
  // Reply.vue
          created() {
  
              window.events.$on('selfAddLike', (data) =&gt; {
                  this.isFavorited = true;
                  this.favoritesCount = this.favoritesCount + data;
                  window.events.$emit('showAddLike');
              });
  
              window.events.$on('selfRemoveLike', (data) =&gt; {
                  this.isFavorited = false;
                  this.favoritesCount = this.favoritesCount - data;
                  window.events.$emit('showRemoveLike');
              });
          },
  </code></pre>
  <p>How can I make it so it only triggers for a single component and not update the every single  component to have isFavorited triggered.</p>