title: Vue: Style list row when selected
body: <p>I have a list of components called <code>client-row</code> and when I select one I want to change the style.  I run into an issue when trying to remove the styling from the previously selected row, when selecting a new row.</p>
  
  <pre><code>Vue.component('client-row', {
      template: '#client-row',
      props: {
          client: Object,
      },
      data: function() {
          return {
              selected: false
          }
      },
      methods: {
          select: function() {
  
              // Does not work properly
              el = document.querySelector('.chosen_row')
              console.log(el)
  
              if ( el ) {
                  el.className = el.className - "chosen_row"
              }
              this.selected = true
              this.$emit('selected', this.client)
          }
      }
  })
  
  &lt;script type="text/x-template" id="client-row"&gt;
      &lt;tr v-bind:class="{ 'chosen_row': selected }"&gt;
          &lt;td&gt;{{ client.name }}&lt;/td&gt;
          &lt;td&gt;{{ client.location_name || 'no location found' }}&lt;/td&gt;
          &lt;td&gt;{{ client.email || 'no email found' }}&lt;/td&gt;
          &lt;td&gt;&lt;button class="btn btn-sm btn-awaken" @click="select()"&gt;Select&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I can properly set the <code>selected</code> property, <strong>but cannot seem to remove it reliably.</strong></p>