How to add data to an existing array in Vue.js?

Question

Vue.js

Greetings.
I ask for help from those who know
Vue.js so that the case is as follows: when you go to the page, articles are loaded, when you click on the "Load more" button, additional articles should be loaded.
The main problem is that I can not merge 2 arrays.
Tried this.articles.concat(response.data.payload) and via Push.
But each time it throws a TypeError: this.articles.push is not a function. (In 'this.articles.push({ message: 'Baz' })', 'this.articles.push' is undefined) or TypeError: this.articles.concat is not a function. (In 'this.articles.concat(test)', 'this.articles.concat' is undefined)
Using the code:

<template>
    <div class="main__inner useful_inner">
               <section class="section section_1 tittle__section">
            <div class="grid">
                <div class="section__wrapper">
                    <div class="tittle-box">
                        <h1>{{documentContent.title}}</h1>
                       </div>
                    <div class="tag-box">
                        <button @click="addTag('all')" class="tag-box_item active" data-tag="all">
                            <span class="tag-name">всё</span>
                            <span class="tag-count">{{countedTags.all}}</span>
                        </button>
                        <button @click="addTag('radio')" class="tag-box_item" data-tag="radio">
                            <img src="/static/img/tag_radio.svg" class="tag-img" alt="">
                            <span class="tag-name">радиоэфир</span>
                            <span class="tag-count">{{countedTags.radio}}</span>
                        </button>
                        <button @click="addTag('article')" class="tag-box_item" data-tag="article">
                            <img src="/static/img/tag_article.svg" class="tag-img" alt="">
                            <span class="tag-name">статья</span>
                            <span class="tag-count">{{countedTags.article}}</span>
                        </button>
                      </div>
                </div>
            </div>
        </section>
        <!--<router-view-->
           <section class="section section_2">
            <div class="grid">
                <div class="section__wrapper">
                    <div class="articles-box">
                        <div v-for="article in articles"
                             v-bind:item="article"
                             v-bind:key="article.oo_id">
                            <a :href="'//useful/articles//' + article.oo_id" class="articles-box__item" :data-tag="article.tags.category">
                                <svg class="articles-box__item_svg" width="63" height="249" viewBox="0 0 63 249"
                                     fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <rect x="0.76001" y="-3.28906" width="34.7626" height="291" fill="#ADCFF7"/>
                                    <path d="M43.2469 -7.25961V-88.5448H35.0311V314.94H43.2469V173.697V123.377C43.2469 111.987 43.7479 102.088 51.7647 90.4762C61.7856 75.961 62.2866 65.3165 62.2866 57.575C62.2866 49.8336 60.2824 37.2537 51.7647 26.6092C44.9504 18.0936 43.2469 3.50254 43.2469 -7.25961Z"
                                          fill="#ADCFF7"/>
                                </svg>
                                <div class="articles-box__item_inner">
                                    <div class="articles-box__item_tag">
                                        <img :src="article.tags.iconWhite" :alt="article.name" class="item__tag_img">
                                        <span class="item__tag_text">{{ article.tags.name }}</span>
                                    </div>
                                    <div class="item__inner_info">
                                        <div class="info__top-box">
                                            <span class="info__title">id={{ article.oo_id }};name={{ article.name }} </span>
                                            <span class="info__descript">{{ article.description }}</span>
                                        </div>
                                        <div class="info__bottom-box">
                                            <div class="info__bottom-box_date">{{ article.date }}</div>
                                            <div class="info__bottom-box_watched">
                                                <img src="/static/img/wacthed_eye.svg" alt=""><span>{{ article.views }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item__inner_img">
                                        <img :src="article.previewImage" :alt="article.name">
                                    </div>
                                </div>
                            </a>

                            <button @click.prevent="loadMore">Load more</button>
                            <a href="#" class="orange__link show_more">
                                <span>Показать ещё</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    import axios from 'axios'
    import FosJsRouting from './FosJsRouting';

    export default {
        name: 'app',

        data() {
            let categoryValue = document.getElementById('category').value;
            console.log('categoryValue =' + categoryValue);
            let documentId = document.getElementById('documentId').value;
            console.log('documentId =' + documentId);
            return {
                userIsAuthorized: false,
                category: categoryValue,
                documentId: documentId,
                tags: ['all'],
                articles: [],
                documentContent: [],
                countedTags: [],
                page: 1,
      
            }
        },
        created() {
            this.getDocument();
            this.getCountedTags();
            this.getArticles();
        },
        methods: {
            loadMore: function() {
                this.page = this.page + 1;
                var vm = this;
                axios.get(FosJsRouting.generate('getArticleList', {category: this.category, tags: this.tags, page: this.page})).then(response => {
                     // only 10 will be visible at any time
                    if (response.data.status === 0) {
// Merges both arrays
                       vm.articles = vm.articles.concat(response.data.payload);
                       
                    }
                    else {
                        console.log(response.data.message);
                    }
                });
            },
            addTag: function (value) {
                let allIndexTag = this.tags.indexOf('all');
                if (value === 'all') {
                    this.tags = ['all'];
                } else if (this.tags.includes(value)) {
                    if (allIndexTag !== -1) {
                        this.tags.splice(allIndexTag, 1);
                    }
                    this.tags = this.tags.filter(function (e) {
                        return e !== value
                    });
                    if (this.tags.length === 0) {
                        this.tags = ['all'];
                    }
                } else {
                    if (allIndexTag !== -1) {
                        this.tags.splice(allIndexTag, 1);
                    }
                    this.tags.push(value);
                }

                console.log(this.tags);
                this.getArticles();
                console.log(this.tags);
            },
            getArticles: function () {
                axios.get(FosJsRouting.generate('getArticleList', {category: this.category, tags: this.tags}))
                    .then((response) => {
                        if (response.data.status === 0) {
                            console.log(response.data.payload);
                            this.articles = response.data.payload;
                        }
                        else {
                            console.log(response.data.message);
                        }
                    });
            },
            getDocument: function () {
                axios.get(FosJsRouting.generate('getDocumentContent', {id: this.documentId}))
                    .then((response) => {
                        if (response.data.status === 0) {
                            console.log(response.data.payload);
                            this.documentContent = response.data.payload;
                        }
                        else {
                            console.log(response.data.message);
                        }
                    });
             },
            getCountedTags: function () {
                axios.get(FosJsRouting.generate('getCountedTags', {category: this.category}))
                    .then((response) => {
                        if (response.data.status === 0) {
                            console.log(response.data.payload);
                            this.countedTags = response.data.payload;
                        }
                        else {
                            console.log(response.data.message);
                        }
                    });
                // this.$router.push({name: 'articleList'});
            }
        }
    }
</script>

Answer 1

Yes, I sat for 2 days. It's bad not to know JS.
In general, everything is simple and on the surface:

this.articles = {...this.articles, ...response.data.payload};

Answer 2

And where did you get that you have an array there? Did you even read the error message? If "this.articles.push is not a function", then this.articles is not an array, arrays have a push method. Initially, yes, it's an array, but when you call getArticles on created, the property is overwritten. It would be nice to figure out what the request to get articles actually returns - isn't it an object?