Q:

Componente Vue não está dando push na props

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>{{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>

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

A:

Acho que é porque você declarou o método como arrow function. Nesse caso, o this lá dentro será o thismais externo do módulo, não o seu componente.
Experimente uma destas opções:
// ...
methods: {
    addItem() {

    }
}

ou 
// ...
methods: {
    addItem: function() {

    }
}

Isso deve resolver o undefined que você relatou, mas não sei se resolve seu aplicativo. Você parece estar querendo que as alterações nessa array se propaguem para o componente pai, e dele para o irmão, mas isso não vai acontecer (as props são propagadas apenas "para dentro"). 

