title: vuejs passing array of checkboxes to parent template is only passing one value
body: <p>I looked at potential dupes of this, such as this <a href="https://stackoverflow.com/questions/46935863/how-can-i-collect-selected-checkboxes-from-all-child-checkbox-components-in-vue">one</a> and it doesn't necessarily solve my issue.</p>
  
  <p>My scenario is that I have a component of orgs with label and checkbox attached to a v-model. That component will be used in combination of other form components. Currently, it works - but it only passes back one value to the parent even when both checkboxes are click.</p>
  
  <p><strong>Form page:</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;section&gt;
      &lt;h1&gt;Hello&lt;/h1&gt;
      &lt;list-orgs v-model="selectedOrgs"&gt;&lt;/list-orgs&gt;
      &lt;button type="submit" v-on:click="submit"&gt;Submit&lt;/button&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  // eslint-disable-next-line
  import Database from '@/database.js'
  import ListOrgs from '@/components/controls/list-orgs'
  
  export default {
    name: 'CreateDb',
    data: function () {
      return {
        selectedOrgs: []
      }
    },
    components: {
      'list-orgs': ListOrgs,
    },
    methods: {
      submit: function () {
        console.log(this.$data)
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Select Orgs Component</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;ul&gt;
      &lt;li v-for="org in orgs" :key="org.id"&gt;
        &lt;input type="checkbox" :value="org.id" name="selectedOrgs[]" v-on:input="$emit('input', $event.target.value)"  /&gt;
        {{org.name}}
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {db} from '@/database'
  
  export default {
    name: 'ListOrgs',
    data: () =&gt; {
      return {
        orgs: []
      }
    },
    methods: {
      populateOrgs: async function (vueObj) {
        await db.orgs.toCollection().toArray(function (orgs) {
          orgs.forEach(org =&gt; {
            vueObj.$data.orgs.push(org)
          })
        })
      }
    },
    mounted () {
      this.populateOrgs(this)
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Currently there are two fake orgs in the database with an ID of 1 and 2. Upon clicking both checkboxes and clicking the submit button, the selectedOrgs array only contains 2 as though the second click actually over-wrote the first. I have verified this by only checking one box and hitting submit and the value of 1 or 2 is passed. It seems that the array method works at the component level but not on the component to parent level.</p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Thanks to the comment from puelo I switched my orgListing component to emit the array that is attached to the v-model like so:</p>
  
  <pre><code>export default {
    name: 'ListOrgs',
    data: () =&gt; {
      return {
        orgs: [],
        selectedOrgs: []
      }
    },
    methods: {
      populateOrgs: async function (vueObj) {
        await db.orgs.toCollection().toArray(function (orgs) {
          orgs.forEach(org =&gt; {
            vueObj.$data.orgs.push(org)
          })
        })
      },
      updateOrgs: function () {
        this.$emit('updateOrgs', this.$data.selectedOrgs)
      }
    },
    mounted () {
      this.populateOrgs(this)
    }
  }
  </code></pre>
  
  <p>Then on the other end I am merely console.log() the return. This "works" but has one downside, it seems that the $emit is being fired before the value of selectedOrgs has been updated so it's always one "check" behind. Effectively,I want the emit to wait until the $data object has been updated, is this possible?</p>