I'm working on a project using VueJS and I need the following:

Use the API and get the list of users in the home page.

When a user's button is clicked, I need to redirect to another component and output that user's details (only the details of the user I clicked) in that component.

This is a table that displays user information

 <v-data-table hide-actions flat :headers="headers" :items="doctors">
        <template v-slot:items="props">
          <td>{{ props.index + 1 }}</td>
          <td>{{ props.item.profile.full_name }}</td>
          <td>{{ props.item.email }}</td>
          <td>{{ props.item.username }}</td>
          <td>{{ props.item.updated_at }}</td>
         <td> 
          <v-btn outline small color="indigo" @click="view(props.item)">
                                <i class="fa fa-eye"></i> &nbsp; make payment
                            </v-btn>
         </td>


        </template>
        <template v-slot:no-results>
          <h6 class="grey--text">No data available</h6>
        </template>
      </v-data-table>

View function in method

 view() {
            window.open(`/finance/pay-doctors/${item.id}`, "_blank");
        },

I created a dynamic route

 { path: '/finance/pay-doctors/:id', component: DoctorDetails}

Unable to create DoctorDetails and display data