So I have my javascript code below which is essentially for a social media and upon clicking a certain button it goes to the next user page, my question is is this set up correctly to do. I do not have a database to connect to so i cannot test it out right now.

   <template>
      <v-carousel>
        <v-carousel-item
            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
            cover
        ></v-carousel-item>
    
        <v-carousel-item
            src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg"
            cover
        ></v-carousel-item>
      </v-carousel>
      <div class="matching">
        <h1>Welcome to the Matching Page</h1>
        <router-link @click = "edit()" class="button">Edit Profile</router-link>
      </div>
      <div class="infoBox">
        <p class ="img">{{user.profilePicture}}</p>
        <p class="boldText">{{user.displayName}}</p>
        <p>Full name: {{user.name}}</p>
        <p>Age: {{user.age}}</p>
        <p>Height: {{user.height}}</p>
        <p>Biography: {{user.biography}}</p>
        <p class="boldText">Dislikes</p>
        <p class="dislikes">{{user.dislikes}}</p>
      </div>
      <button class="button" onclick="nextUser">move to next</button>
    
    
    </template>
    
    
    
    
    <script>
    import { useRouter } from 'vue-router';
    import apiClient from '@/axiosConfig'; // Import the Axios configuration
    import { ref } from 'vue';
    
    export default {
      name: 'MatchingPage',
      data() {
        return {
          photo: '', // Replace with actual photo path or URL
          activeTab: 'personal',
          user: {
            email: '',
            address: '',
            phoneNumber: '',
            age: '',
            height: '',
            displayName: '',
            profilePicture: '',
            contact: '',
            biography: '',
            preferences: new Set(),
            dislikes: new Set()
          },
          selectedDislikes: [],
          selectedPreferences: []
    
        };
      },
      methods:{
        edit() {
          const router = useRouter();
    
          function goToEditProfile() {
            router.push('/edit-profile');
          }
    
          return {goToEditProfile};
        },
        setup(){
          const users = async () => {
            try{
              //actually figure out how to pull data from database later
              const response = await apiClient.get('/database');
              console.log('fetch data response:', response.data); // Logging response data
              // grabbing the token back from the server (which will be in local storage)
              const { token } = response.data;
              if (token) {
                localStorage.setItem('token', token); // Store the token
                apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`; // Set default header
                console.log('fecth successfully');
              } else {
                console.error('No token received from server');
                alert('Failed to sign up, no token received');
              }
            } catch (error) {
              console.error('Signup failed:', error.response ? error.response.data : error);
              alert(`Signup failed: ${error.response ? error.response.data.message : "Network or server error"}`);
            }
          };
          return {users};
        },
        nextUser() {
          let currentIndex = 0
          const users = setup()
      // Check if there are more users to iterate through
          if (currentIndex < users.length - 1) {
          currentIndex++;
          return users[currentIndex];
        } else {
        // If currentIndex is at the end, wrap around to the beginning
          currentIndex = 0;
          return users[currentIndex];
      }
    }
      },
      }
    </script>

Is there a better way to set up my frontend so tat it goes to the next user and displays said users information upon clicking the button?

thank you