Component Vue is not pushing on the props

I am creating a simple task list with Vue.js, doing this using separate components in files. One of the components has the function of adding an object to an array, which is a props, but there is the error, the component is not able to identify the array in which it has to be added. I already gave console.log and gave undefined , but in chrome dev tools, if I hover over the property, the array shows what's inside it and shows that it's the array I want, so I understand, it says it's working within the scope of that component, or I'm wrong about the way dev tools work.

App.vue:

<template>
<div id="app" class="container">
  <h2>{{title}}</h2>
  <add-item-component v-bind:items="items"></add-item-component>
  <items-component :items="items"></items-component>
  <div class="footer">
    <hr>
    <change-title-component></change-title-component>
  </div>
</div>
</template>

<script>
import AddItemComponent from "./components/AddItemComponent";
import ItemsComponent from "./components/ItemsComponent";
import ChangeTitleComponent from "./components/ChangeTitleComponent";

export default {
  components: {
    AddItemComponent,
    ItemsComponent,
    ChangeTitleComponent
  },
  data() {
    return {
      items: [{text: "Bananas", checked: true},
              {text: "Apples", checked: false}],
      title: "My Shopping List"
    }
  },
}
</script>

<style>

</style>

AddItemComponent.vue:

<template>
    <div>
        <div class="input-group">
            <input type="text" class="input form-control" placeholder="add shopping list item" @keyup.enter="addItem" v-model="newItem">
            <span class="input-group-btn">
                <button class="btn btn-default">Add!</button>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        data: () => {
            return {
                newItem: ""
            }
        },
        props: ["items"],
        methods: {
            addItem: () => {
                let text;

                console.log(this.newItem);
                console.log(this.items);
                text = this.newItem.trim();
                if (text) {
                    this.items.push({
                        text: text,
                        checked: false
                    });
                    this.newItem = "";
                }
            },
            changeNewItem: (event) => {
                this.newItem = event.target.value;
            }
        }
    }
</script>

<style scoped>

</style>

I am running this code on a webpack server and have rebooted multiple times but nothing.