title: Vue.js - How to emit to parent component on change in data object?
body: <p>The use of <code>v-model</code> creates a two-way bind between the view and data model WITHIN a component. And a view interaction can emit an event to a parent component.</p>
  <p>It is possible, though, to have a data model change in a child component emit an event to a parent component?</p>
  <p>Because as long as the user is the one clicking the checkbox, things are fine in both the parent and the child (the data model updates AND the event is emitted). But if I pull up the Vue dev tools and toggle the checkbox within the child component's data, the two-way bind from the <code>v-model</code> will make the appropriate updates within the CHILD component, but nothing ever makes it over to the parent component (I suspect because an event is not emitted).</p>
  <p>How can I make sure the parent component &quot;knows&quot; about the data change in the child component? I assume this must be possible in some way... If not emitting from the child, perhaps there's some way to have the parent component &quot;watch&quot; the child component's data?</p>
  <p>Thank you for any help or guidance! I'll keep reading and looking for an answer in the meantime!</p>
  <p><strong>child component</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;list-item&quot; v-on:click=&quot;doSomething&quot;&gt;
      &lt;input type=&quot;checkbox&quot; v-model=&quot;checked&quot;&gt;
      &lt;label v-bind:class=&quot;{ checked: checked }&quot;&gt;{{ name }}&lt;/label&gt;
    &lt;/div&gt;
    ...
  &lt;/template&gt;
  
  &lt;script&gt;
    ...
    data: function() {
      return {
        checked: false,
      }
    },
    methods: {
      doSomething() {
        ...
        this.$emit('doSomething', this)
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p><strong>parent component</strong></p>
  <pre><code>&lt;template&gt;
    &lt;ChildComponent v-on:doSomething=&quot;getItDone&quot;&gt;&lt;/ChildComponent&gt;
    ...
  &lt;/template&gt;
  
  &lt;script&gt;
    ...
    methods: {
      getItDone(target) {
        ...
      }
    }
  &lt;/script&gt;  
  </code></pre>
  <hr />
  <p><strong>UPDATE:</strong> After playing around a bit more with @IVO GELOV's solution, the issue I'm running into now is that, when multiple Child components are involved, since the Parent's one singular value of myBooleanVar drives the whole thing, checking the box of one child component causes <em>all</em> child components to be checked.</p>
  <p>So it's definitely progress in that both view and data manipulations make it over to the parent, but I'm still trying to figure out how to &quot;isolate&quot; the situation so that just the one Child component that was acted upon gets dragged into the party...</p>