title: custom event ($emit) in VueJS
body: <p>I'm having an issue using <code>$emit</code> in VueJS. I received this error:</p>
  
  <blockquote>
    <p>[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "userAge"</p>
  </blockquote>
  
  <p>Parent:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="component"&gt;
      &lt;h1&gt;The User Component&lt;/h1&gt;
      &lt;p&gt;I'm an awesome User!&lt;/p&gt;
      &lt;button @click="changeName"&gt;Change my name&lt;/button&gt;
      &lt;p&gt;Name is {{ name }}&lt;/p&gt;
      &lt;hr&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
          &lt;app-user-detail 
            :myName="name" 
            :resetNameParent="resetNameFn"
            @nameWasReset="name = $event"
            :userAge="age"
          &gt;&lt;/app-user-detail&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
          &lt;app-user-edit 
            :userAge="age"
            @ageWasEdited="age = $event"
          &gt;&lt;/app-user-edit&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import UserDetail from './UserDetail.vue';
  import UserEdit from './UserEdit.vue';
  
  export default {
    data() {
      return {
        name: 'Max',
        age: 27
      }
    },
    methods: {
      changeName() {
        this.name = 'Anna'
      },
      resetNameFn() {
        this.name = 'Max';
      },
    },
    components: {
      appUserDetail: UserDetail,
      appUserEdit: UserEdit
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  div {
    background-color: lightblue;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Child:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="component"&gt;
      &lt;h3&gt;You may edit the User here&lt;/h3&gt;
      &lt;p&gt;Edit me!&lt;/p&gt;
      &lt;p&gt;User Age: {{ userAge }}&lt;/p&gt;
      &lt;button @click="editAge"&gt;Edit Age&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ['userAge'],
    methods: {
      editAge() {
        // this.userAge = 30; - przestarzałe
        // this.$emit('ageWasEdited', this.userAge);  - przestarzałe
        this.$emit('ageWasEdited', 30);
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  div {
    background-color: lightgreen;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>I read the manual but I could not implement the solution correctly. </p>
  
  <p>How can I avoid this error?</p>