title: VueJS for loop creating components, components seem to be linked
body: <p>i'm doing a for loop on an array, for each value i'm creating a component. I was under the impression that I need to put a <code>key</code> on the for loop so that Vue knows it is unique? </p>
  
  <pre><code>&lt;div v-for="hours in location.hours" class="businessHours" :key="hours.id"&gt;
      &lt;business-hours :response="hours" :unique-key="uniqueKey" :default-weekdays="response.weekdays"&gt;
          &lt;div slot-scope="{ hours, weekdays, title, uniqueKey, toggle, inArray, componentKey }"&gt;
  
              &lt;div class="panel-heading v-center"&gt;
                  &lt;div class="field"&gt;
  </code></pre>
  
  <p>Within this component I have got some logic that just selects/deselected checkboxes, however these 2 components seem to be linked. When I click checkboxes on one of them, the other one changes too!</p>
  
  <p>This is my component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;slot :hours="response" :weekdays="weekdays" :title="title" :toggle="toggle" :inArray="inArray" :componentKey="componentKey"&gt;&lt;/slot&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  
      export default {
          props: [ 'response', 'uniqueKey', 'defaultWeekdays' ],
          data: function() {
              return {
                  weekdays: this.response.weekdays,
                  componentKey: this.key()
              }
          },
          created() {
              if (this.weekdays === undefined) {
                  this.weekdays = this.defaultWeekdays;
              }
          },
          methods: {
              title: function() {
  
                  if (this.weekdays === undefined) return;
  
                  let selected = Object.keys(this.weekdays).filter((e) =&gt; { if (this.weekdays[e].selected) return e });
  
                  if (selected.length === 0) return;
  
                  let start = this.weekdays[parseInt(selected[0])].value;
                  let end = this.weekdays[parseInt(selected[selected.length - 1])].value;
  
                  if (start === end) {
                      return start.charAt(0).toUpperCase() + start.substring(1);
                  }
                  return start.charAt(0).toUpperCase() + start.substring(1) + ' - ' + end.charAt(0).toUpperCase() + end.substring(1);
              },
              toggle: function(index) {
  
                  let clicked = this.weekdays[index];
                  let action = clicked.selected ? 'remove' : 'add';
                  let selected = Object.keys(this.weekdays).filter((i) =&gt; { if (this.weekdays[i].selected) return i });
  
                  let start = parseInt(selected[0]);
                  let middle = parseInt(selected[Math.floor(selected.length / 2)]);
                  let end = parseInt(selected[selected.length - 1]);
  
                  if (isNaN(start) &amp;&amp; isNaN(middle) &amp;&amp; isNaN(end)) {
                      start = middle = end = index;
                  }
  
                  // Add and remove multiple days
                  if (index &lt; (start - 1) &amp;&amp; action === 'add') {
                      for (let i = index; i &lt;= (start - 1); i++) {
                          this.weekdays[i].selected = true;
                      }
                  }
                  if (index &gt; start &amp;&amp; index &lt; middle &amp;&amp; action === 'remove') {
                      for (let i = start; i &lt;= index; i++) {
                          this.weekdays[i].selected = false;
                      }
                  }
  
                  if (index &gt; (end + 1) &amp;&amp; action === 'add') {
                      for (let i = end + 1; i &lt;= index; i++) {
                          this.weekdays[i].selected = true;
                      }
                  }
                  if (index &lt; end &amp;&amp; index &gt;= middle &amp;&amp; action === 'remove') {
                      for (let i = index; i &lt;= end; i++) {
                          this.weekdays[i].selected = false;
                      }
                  }
  
                  // Add and remove single days
                  if ((index === (end + 1) || index === (start - 1)) || (index === end || index === start) &amp;&amp; action === 'add') {
                      this.weekdays[index].selected = true;
                  }
                  if ((index === end || index === start) &amp;&amp; action === 'remove') {
                      this.weekdays[index].selected = false;
                  }
              },
              inArray: function(needle) {
                  let length = this.weekdays.length;
                  for(let i = 0; i &lt; length; i++) {
                      if(this.weekdays[i] === needle) return true;
                  }
                  return false;
              },
              key: function() {
                  return Math.random().toString(36).replace(/[^a-z0-9]+/g, '').substr(0, 10);
              }
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Can someone lend me a hand here as to why this is happening? </p>