[Vuejs]-How can I dynamically change Axios request on button click?

Use the same variable to set the new link as below :

<template>
    <div class="container">
        <ul>
            <li v-bind:key="person.birth_year" v-for="person of people" class="response">
                <div class="card">
                    <h1>{{person.name}}</h1>
                    <h3>Altura: {{person.height}}</h3>
                    <h3>Peso: {{person.mass}}</h3>
                    <h3>Gênero: {{person.gender}}</h3>
                    <h3>Cor da pele: {{person.skin_color}}</h3>
                </div>
            </li>
            <button v-on:click="getData()">Proxima Pagina</button>
        </ul>
    </div>
</template>

<script>
    import api from '../services/api'

    import '../css/index.css'

    export default {
        data() {
            return {
                people: [],
                next: "",
                req: "people/"
            }
        },

        mounted() {
            this.getData();
        },
        methods: {

            getData() {
                api.get(this.req).then(response => {
                    this.people = response.data.results;
                    this.req = response.data.next;
                });
            }
        }
    }
</script>