Fetch data and dynamically show it in the same component?

[torbentschechne]

Hello,

I give Inertia a try right now and maybe my understanding is not correct or I miss something. I have a Detail component like this. This one has an input text for an api key and a button. Below that I want to render a list of items, when the submit call is coming back with a reponse.

<script setup>
defineProps({
    connection: Object,
    lists: Array
})

const form = useForm({
    api_key: null,
})

function submit() {
    form.post('/get-lists', {
        only: ['lists'],
    })
}
</script>


<template>
     <form @submit.prevent="submit">
        <InputText type="text" v-model="form.api_key" />
        <div v-if="form.errors.api_key">{{ form.errors.api_key }}</div>
        <Button
            :disabled="form.processing"
            type="submit"
            label="Submit"
        />
    </form>

    <template v-for="list in lists" :key="list.id">
        {{ list.name }}
    </template>
</template>

My PHP Controller in Laravel looks like this:

public function getLists(Request $request): Response
    {
        $client = new Client($request->get('api_key'));
        $response = $client->list();

        return Inertia::render('Details', [
            'lists' => $response['lists'],
        ]);
    }

What happens now is that, the request is being made. The data is also displayed, but the route changes to get-lists. I thought that, when returning the same Component, Inertia detects what has changed and just refreshes the component, and is not performing a reload/redirects. I thought about returning a json response and handle the data in the onSuccess hook. But this does not work, as Inertia needs a InertiaResponse. In this case I can not built a dynamic SPA. Is my understanding wrong or do I miss something?