title: Toggling button color on click in Vue.js
body: <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>