Toggling button color on click in Vue.js
<p>I am working on a gomoku style game using Vue.js, and I am stuck. When one of the buttons is clicked, it should change the <code>background-color</code> of that button to green, then if I click on another open spot, it should change the <code>background-color</code> to blue (thereby simulating each player's move). The problem with my program so far is that when I click on a button, it changes every empty spot to green instead of just the one I clicked. I am trying to do this in my <code>index.html</code>:</p>

<pre><code>&lt;ul&gt;
  &lt;li v-for="slots in board"&gt;
   &lt;ul id="board"&gt;
    &lt;li v-for="slot in slots"&gt;
      &lt;button @click="handleClick($index, $parent.$index)"
      :class="{'green': turn}"
      &gt;{{slot}}&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Then in my <code>styles.css</code>:</p>

<pre><code>.green{
   background-color: #41B883;
}
.blue{
   background-color: #35495E;
}
</code></pre>