title: Vue.js - v-show and v-for not responding to changes
body: <p>I would like buttons to show underneath an image in a gallery when the image is clicked. Here is a snippet of my Vue component:</p>
  
  <pre><code>&lt;div class="col-xs-2" v-for="(data, key) in imgParsed"&gt;
      &lt;a v-show="data != null" href='javascript:void(0);' @click.prevent="showRemove(key)"&gt;
          &lt;img :src="data" :alt="key"&gt;
      &lt;/a&gt;
      &lt;div class="row" v-show="removingImage[key]"&gt;
           &lt;div class="col-xs-6"&gt;
               &lt;a href="javascript:void(0);" class="btn btn-danger right" value="Remove image" @click.prevent="remove(key)"&gt;Remove this image&lt;/a&gt;
           &lt;/div&gt;
           &lt;div class="col-xs-6"&gt;
               &lt;a href="javascript:void(0);" class="btn btn-success left" value="Cancel" @click.prevent="hideRemove(key)"&gt;Cancel&lt;/a&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ol>
  <li><p><code>removingImage</code> is an object containing the image name(s) and whether they have been clicked or not.</p>
  
  <p>Example (in Vue component): </p>
  
  <pre><code>...
  data() {
      return {
          ...
          removingImage: {
              image1: false,
              ...
              imageN: false, // They are all false by default
          }
      }
  }
  </code></pre></li>
  <li><p><code>showRemove(key)</code> is supposed to show the confirm and cancel buttons when the image is clicked. This is done by setting <code>removingImage[img]</code> to <code>true</code>.</p></li>
  <li><p><code>hideRemove(key)</code> is supposed to hide the confirm and cancel buttons when the cancel button is pressed. This is done by setting <code>removing[img]</code> to <code>false</code></p></li>
  </ol>
  
  <h1>The problem</h1>
  
  <p>When the method <code>showRemove("image1")</code>, is called, the value of <code>removingImage["image1"]</code> doesn't seem to respond.</p>
  
  <p><strong>A.</strong> In the Vue Devtools, the value of <code>removingImage["image1"]</code> stays false, unless I re-click on my component details, essentially re-evaluating the status of my component.</p>
  
  <p><strong>B.</strong> In the <code>showRemove</code> method, I included the following debugging code:</p>
  
  <pre><code>showRemove: function(img) {
      try {
          var a = this.removingImage[img]
          this.removingImage[img] = true; // This was the only thing originally there
          var b = this.removingImage[img]
          console.log('a = '+a,'b = '+b)
          if (a==b &amp;&amp; a == false) {console.log('removingImage not updating')}
      } catch (err) {
          console.log(err)
      }
  }
  </code></pre>
  
  <p>Clicking the image once yields <code>a = false b = true</code>, and once again gives <code>a = true b = true</code>, which tells me that the value of <code>removingImage["image1"]</code> <em>is</em> updating, but the component isn't 'seeing it'?</p>
  
  <p><strong>C.</strong> I included some moustaches (or mustaches) within the template like so <code>{{removeImage[key]}}</code> so that I could confirm my fears. As I expected, no matter how many times I clicked on the image, it would always show <a href="https://mega.nz/#!hoonHYRQ!6AdakBu3OKVaO-r3DvfepV-N75d9DfONb0K2LQutAzY" rel="nofollow noreferrer" title="Note: click &#39;view image&#39; to see">this</a>.</p>
  
  <p>Any ideas?</p>
  
  <p>Edit: I will try and reproduce the problem in a fiddle.</p>
  
  <p>Edit(2): The <a href="http://jsfiddle.net/5ouyz2db/3/" rel="nofollow noreferrer">fiddle</a>, as promised (excuse the disgusting code - I am so very new to this)</p>