Hi, I'm new to coding and trying to implement a function that shows related articles using Java with REST api. However, when I call the API using axios, the data is not being displayed on the view.

I have checked the API and confirmed that it is returning data. Here is my HTML code:

<div class='related-article-list'>
    <div id="list-related-el">
        <related-list></related-list>
    </div>

<template id="related-list">
    <div class="ralated-article-container" v-for="r in relatedLists" :key="r.id">
        <div class="ralated-article-title">
            <a v-bind:href="r.link">{{r.title}}</a>
        </div>
        <div class="user-name">
            <a v-bind:href="r.userLink">{{r.user}}</a>
        </div>
        <div class="view-total">
            <p>{{r.view}}</p>
        </div>
    </div>
</template>

This is my Script code:

<script type="text/javascript">
    $(document).ready(function () {
        var id = ([[${ topicChapter.getId() }]]);
        var listRelated = new Vue({
            el: "#list-related-el",
            components: {
                'related-list': {
                    template: '#related-list',
                    data() {
                        return {
                            url: "api/get-related-article",
                            id: id,
                            relatedLists: [],
                            dataSize: 0
                        };
                    },

                    methods: {
                        getData: function () {
                            axios.get(`${this.url}id=${this.id}`).then(response => {
                                    this.relatedLists = response.data.data;
                            });
                        }

                    },
                    watch: {
                        page: {
                            immediate: true,
                            handler(newVal, oldVal) {
                                this.getData();
                            }
                        }
                    }
                }
            }
        });

    })
</script>