How to make the form helper reactive (vue3)

[JPortegijs]

Hello,

I'm trying to build a CMS with Laravel and Inertia. I have a form to add/edit a page where I would like to support multi-language. In my header component I have a language switch which works great, it performs a XHR request to re-fetch the current page for selected language, this updates the page props correctly the only thing that does not update is the form itself, it stays on previous language. I'm using the form helper like this:

<template>
  <section>
    <h1 class="text-2xl font-semibold leading-none tracking-wide">
      {{ method === 'edit' ? 'Edit' : 'Create' }} page
    </h1>

    <div class="mt-10 border rounded-lg divide-y bg-white overflow-y-hidden">
      <form class="py-4 px-3" @submit.prevent="form.put(`/admin/page/${page.id}`)">
        {{ form }}

        <div class="w-full">
          <label for="title" class="block mb-2 text-sm font-semibold leading-none">Title</label>
          <input
            id="title"
            v-model="form.title"
            type="title"
            class="h-10 w-full py-2 px-3 text-sm border border-gray-200 rounded-lg placeholder-gray-400 focus:outline-none"
            placeholder="Title..."
            autocomplete="off"
          >
        </div>

        <button
          class="flex items-center justify-center mt-3 py-3 px-4 text-sm text-white font-semibold leading-none rounded-lg bg-gray-500 hover:bg-gray-600"
          type="submit"
          :disabled="form.processing"
        >
          Save
        </button>
      </form>
    </div>
  </section>
</template>

<script setup>
import { useForm } from '@inertiajs/inertia-vue3';

const props = defineProps({
  method: {
    type: String,
    required: true,
    default: 'create',
  },

  page: {
    type: Object,
    required: true,
    default: () => {},
  },
});

const form = useForm({
  title: props.page.title,
});
</script>

I hope my description is clear enough, any help is appreciated!

[ajnsn]

Hey @JPortegijs
Most likely you are preserving the components state: For convenience, the post, put, patch, delete and reload methods all default preserveState to true.
The most easiest solution in case of a language switch might be to set preserveState to false. This will force a fresh page component instance.

[JPortegijs]

Morning @ajnsn,

That seems to do the trick for now, thank you and Merry Christmas!