title: Vue.js multiple instances of same component issue
body: <p>I have created a vue component for selecting photos. When the user clicks any photo the id of the photo will be assigned to a hidden input field inside the component. </p>
  
  <p>Now I have used this component twice on the same page with different data. The problem is when I click on the photo of one component the value of the input field of both the components gets updated. I am using vue.js version <em>2.1.10</em>
  Here is the simplified version of my component.</p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="hidden" :name="inputName" :value="currentSelectedPhoto.id"&gt;
      &lt;div v-for="photo in photos"&gt;
          &lt;div v-on:click="updateSelectedPhoto(photo)"&gt;
              &lt;img :src="photo.photo_url" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The Component</p>
  
  <pre><code>export default {
      props: {
          ...
      },
      methods: {
          getPhotos(){
              ...
          },
          updateSelectedPhoto(photo){
              this.currentSelectedPhoto = photo;
          }
      }
  }
  </code></pre>
  
  <p>This is how I am using it in html</p>
  
  <pre><code>&lt;div&gt;
      &lt;div&gt;
          Profile Photo
          &lt;photo-selector
              photos="{{ $photos }}"
              input-name="profile_photo_id"
              &gt;
          &lt;/photo-selector&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
          Cover Photo
          &lt;photo-selector
              photos="{{ $otherPhotos }}"
              input-name="cover_photo_id"
              &gt;
          &lt;/photo-selector&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>