无法在axios响应中设置Vue.js数据值

我已经为两条路由创建了对api的axios请求。使用响应数据,我将post排序到数组中正确的列中。这一切都正常工作,但是当我将这个数组的值赋给data()中的数组时,会得到以下错误;

TypeError: Cannot set property 'boardPosts' of null
    at eval (SummaryBoard.vue?2681:90)
    at wrap (spread.js?0df6:25)

我的代码;

    import axios from 'axios';

    export default {
        name: 'SummaryBoard',
        data() {
            return {
                boardPosts: '',
            }     
        },
        created() {
            this.getBoardData();
        },
        methods:
            getBoardData() {
                function getBoardColumns() {
                    return axios.get('http://localhost:5000/api/summary-board/columns');
                }

                function getBoardPosts() {
                    return axios.get('http://localhost:5000/api/summary-board/posts');
                }

                axios.all([getBoardColumns(), getBoardPosts()])
                    .then(axios.spread(function(columnData, postData) {
                        let posts = postData.data;
                        // add posts array to each object
                        let columns = columnData.data.map(obj => ({...obj, posts: []}));

                        posts.forEach((post) => {
                            // If column index matches post column index value
                            if(columns[post.column_index]){
                                columns[post.column_index].posts.push(post);
                            }
                        });

                        console.log(columns);
                        this.boardPosts = 'hello';
                    }))
                    .catch(error => console.log(error));
            }
        }
    }