title: VueJS: Why parent's data property not updated when custom event emitted on child fires?
body: <p>In the following code, <a href="https://codepen.io/appu-uno/pen/rErNWJ" rel="nofollow noreferrer">codePen demo here</a></p>
  
  <p>child component emits a custom event <code>changedMsg</code> to parent which changes <code>msg</code> data property on the parent component. Not sure, why <code>changedMsg</code> does not work. It does not modify <code>msg</code> property of parent. </p>
  
  <p>Note: In a single file setup this works, but not in the setup below which is using <code>template</code> tag. Not sure, why?</p>
  
  <p><strong>VueJS</strong></p>
  
  <pre><code>var child = {
    template: '#child',
    props: ['parentMsg'],
     methods: {
       changeParentMsg() {
         console.log(this.parentMsg)
         this.parentMsg = 'Message was changed by CHILD'
         this.$emit('changedMsg', this.parentMsg)
       }
     }
  }
  
  new Vue({
    el: '#parent',
    data() {
      return {
        msg: 'Hello World'
      }
    },
    components: {
      child
    },
  
    methods: {
        changeMsg() {
          this.msg = 'Changed Own Msg'
        }
    },
  
  })
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div&gt;
      &lt;h4&gt;Parent&lt;/h4&gt;
      &lt;p&gt;{{ msg }}&lt;/p&gt;
  
    &lt;button @click="changeMsg"&gt;Change Own Message&lt;/button&gt;
    &lt;br&gt;
      &lt;div class="child"&gt;
        &lt;h4&gt;Child&lt;/h4&gt;
  &lt;child :parentMsg="msg" @changedMsg= "msg = $event"&gt;&lt;/child&gt;
        &lt;/div&gt;
  &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;template id="child"&gt;
    &lt;div&gt;
      &lt;button @click="changeParentMsg"&gt;Change Parnets msg&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#parent {
    background-color: lightblue;
    border: 2px solid;
    width: 300px;
  }
  
  .child {
    background-color: lightgray;
    border: 2px solid;
    margin-top: 20px
  }
  </code></pre>
  
  <p>Thanks</p>