Interview.vue

<template>
    <div class="container">
        <example-article v-for="article in articles" :article="article"></example-article>

        <button @click="fixArticles()">Fix Articles</button>
        <button @click="pushArticle({title: 'Third Title', content: 'Content of the third article'})">Push Article</button>
    </div>
</template>

<script>
    let ExampleArticle = {
        props: ['article'],

        template: `<div class='row'>
            <h5>{{article.title}}</h5>

            <p>{{article.content}}</p>
        </div>`
    }

    export default {
        components: {
            'example-article': ExampleArticle
        },

        data () {
            return {
                articles: [{
                    title: "First Title",
                    content: "Content of the first alticle"
                }, {
                    title: "Second Title",
                    content: "Content of the second alticle"
                }],

            }
        },

        methods: {
            fixArticles() {
                for (var i = this.articles.length - 1; i >= 0; i--) {
                    this.articles[i].content = this.articles[i].content.replace("alticle", "article")
                }
            },

            pushArticle(article) {
                this.articles[this.articles.length] = article
            }
        }
    }
</script>