Having trouble passing data between Components - vue.js

Question

How do I pass an Object Array created by a method within my component to another component? I've tried using props but perhaps my understanding of how props work isn't correct.
<template>
<div class="media-body">
<ul>
<li v-for="item in items" v-bind:class="{ active: item.active }">{{ item.text }}
</li>
</ul>
<button type="button" class="btn btn-danger" v-on:click="addItem">Test</button>
</template>
<script>
export default {
data() {
return {
item: "a",
item2: "b",
item3: "c",
item4: "d",
items: [],
}
},
methods: {
addItem: function () {
var testArray = this.item.concat(this.item2, this.item3, this.item4);
for (var i = 0; i < testArray.length; i++) {
this.items.push({
text: testArray[i],
active: false });
}
// if I check console.log(this.items) at this point I can see the data I want to pass
},
}
}
</script>
Secondary Component I'm trying to pass Data to.
<template>
<div class="media-body">
<div class="media-label">Title:
<textarea class="form-control" placeholder="Title"></textarea>
</div>
</div>
</template>
<script>
export default {
props: ['items'],
data() {
return {
}
},
</script>

Answer 1

To pass the props to other component you have to write following code in the first component:
added <secondComponent :items="items" /> in HTML code.
import and use secondComponent in vue component like this: components: [secondComponent]
Here is complete code with these changes:
<template>
<div class="media-body">
<ul>
<li v-for="item in items" v-bind:class="{ active: item.active }">{{ item.text }}
</li>
</ul>
<button type="button" class="btn btn-danger" v-on:click="addItem">Test</button>
<secondComponent :items="items" />
</template>
<script>
import secondComponent from '/path/of/secondComponent'
export default {
components: [secondComponent]
data() {
return {
item: "a",
item2: "b",
item3: "c",
item4: "d",
items: [],
}
},
methods: {
addItem: function () {
var testArray = this.item.concat(this.item2, this.item3, this.item4);
for (var i = 0; i < testArray.length; i++) {
this.items.push({
text: testArray[i],
active: false });
}
// if I check console.log(this.items) at this point I can see the data I want to pass
},
}
}
</script>
In the second component you have already defined items as props, which you can as well use in template/HTML of second component.