Vue ошибка Avoid mutating a prop directly

Учу Vuejs. По событию клика на кнопке в дочернем компоненте вызываю метод, который передает событие в родительский компонент, затем в родителе инлайн меняется значение переменной. Вью на такое дело ругается.

Ошибка:

[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: "carName"

Вот компонент родителя:

<template>
  <div id="app">
    <app-car :carName="carName" :carYear="carYear" @nameChanged="this.carName = $event"></app-car>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      carName: 'Ford',
      carYear: 2018
    }
  }
}; 
</script>

Дочерний компонент:

<template>
    <div>
        <h3>{{ carName }}</h3>
        <p>{{ carYear }}</p>
        <button @click="changeName">Change Name</button>
    </div>
</template>
<script>
    export default {
        props: ['carName', 'carYear'],
        methods: {
            changeName() {
                this.carName = 'Mazda'
                this.$emit('nameChanged', this.carName)
            }
        }    
    }
</script>

Подскажите как в этом случае лучше поступить, чтобы ошибки не было?