title: Laravel Livewire Same Component Two Items Sync in One Page
body: <p>I made <code>follower</code> component.</p>
  <p>If visitor follows a author, then component will show <code>Following</code> and if not, it will show <code>Follow</code>.</p>
  <p>I put <code>follower</code> component in two places of page.</p>
  <p>-follower component.</p>
  <pre><code>&lt;div&gt;
      &lt;a href=&quot;javascript:void(0);&quot; class=&quot;follow_btn&quot; wire:click=&quot;toggle&quot;&gt;{{$following? 'Following': 'Follow'}}&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>public $following = true;
  public $post;</p>
  <pre><code>public function mount($post)
  {
      $this-&gt;post = $post;
  }
  public function render()
  {
      if(Auth::check()&amp;&amp;user()-&gt;isFollowing($this-&gt;post-&gt;user))
      {
          $this-&gt;following = true;
      }else {
          $this-&gt;following = false;
      }
      return view('livewire.following');
  }
  public function toggle()
  {
      user()-&gt;toggleFollow($this-&gt;post-&gt;user);
  }
  </code></pre>
  <p>I am using this component in two places in one page.</p>
  <pre><code>&lt;livewire:follower :post=&quot;$post&quot;&gt;
  ...
  &lt;livewire:follower :post=&quot;$post&quot;&gt;
  </code></pre>
  <p>When I click one component, it was toggled and worked well.</p>
  <p>But the other component keeps old state.</p>
  <p>How can I sync them?</p>
  <p>Thank you</p>