Estou criando uma simples lista de tarefas com Vue.js, fazendo isso usando componentes separados em arquivos. Um dos componentes tem a função de adicionar um objeto a uma array, que é uma props, mas aí está o erro, o componente não está conseguindo identificar a array na qual tem que ser adicionada. Já dei console.log e deu undefined, mas no chrome dev tools, se eu passar o mouse em cima da propriedade, a array, mostra o que tem dentro dela e mostra que é sim a array que eu quero e meio que, pelo que entendi, diz que ela tá funcionando no escopo daquele componente, ou eu estou enganado da forma como o dev tools funciona.

App.vue:

<template> <div id="app" class="container">   <h2>{Componente Vue não está dando push na props}</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> 

Estou rodando esse código em um servidor webpack e já reiniciei várias vezes mas nada.