title: Ensure multiple instances of the same component have non-shared state
body: <p>I have an app in which I have a counter which shows a value, and a button that can increment that value.</p>
  <p>I used <a href="https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch" rel="nofollow noreferrer">simple state management from scratch as the docs suggest</a>.</p>
  <p>I can add counters to this list with an 'Add Counter' button so that I have multiple counters on the page.</p>
  <p>Despite each instance of my <code>counter</code> component having a separate key in the parent component (<a href="https://v2.vuejs.org/v2/guide/list.html#key" rel="nofollow noreferrer">as per the docs</a>), each instance of the <code>counter</code> shares the same value:</p>
  <p><a href="https://i.stack.imgur.com/3m4VV.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3m4VV.gif" alt="counters-with-shared-state" /></a></p>
  <p>How can I add a separate instance of the same component that has its own state?</p>
  <p>Here is the code on webpackbin: <a href="http://www.webpackbin.com/41hjaNLXM" rel="nofollow noreferrer">http://www.webpackbin.com/41hjaNLXM</a></p>
  <p>Code:</p>
  <p><strong>App.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;counter v-for=&quot;n in state.countersAmount&quot; :key=&quot;n&quot;&gt;&lt;/counter&gt;
      &lt;button v-on:click=&quot;addCounter&quot;&gt;Add a Counter&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Counter from './Counter.vue'
  
    const store = {
      state: {
        countersAmount: 1
      },
      incrementCounters() {
        ++this.state.countersAmount
      }
    }
  
    export default {
      data() {
        return {
          state: store.state
        }
      },
      methods: {
        addCounter() {
          store.incrementCounters()
        }
      },
      components: {
        Counter
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p><strong>Counter.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;{{state.counterValue}}&lt;/h1&gt;
          &lt;button v-on:click=&quot;increment&quot;&gt;+&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  const store = {
      state: {
          counterValue: 0,
      },
      increment() {
          ++this.state.counterValue
      }
  }
  export default {
      data() {
          return {
              state: store.state
          }
      },
      methods: {
          increment() {
              store.increment()
          }
      }
  }
  &lt;/script&gt;
  </code></pre>