title: InertiaJS keep form data after validation error
body: <p>In my InertiaJS/VueJS project I have a prop that receive some data from the backend:</p>
  <pre><code>event: {
    type:    Object,
    default: () =&gt; { return {} }
  },
  </code></pre>
  <p>That's how the event obj looks in the backend:</p>
  <pre><code>['name' =&gt; 'Event Name']
  </code></pre>
  <p>I use <code>toRefs</code> to convert the reactive prop and update its properties in the UI:</p>
  <pre><code>const eventRef = toRefs(props).event
  </code></pre>
  <p>So the Event has the name 'Event Name' when the component loads, when I update the event name in the UI to 'New Name' and submit the form, I send the <code>eventRef</code> obj in the request to create the new event:</p>
  <pre><code>Inertia.post(url, eventRef, only: ['global'])
  </code></pre>
  <p>If there's a validation error in the backend, I return it to the frontend and show the error in the UI (This is working without problems). The problem I have is that Inertia  (or maybe VueJS) is returning the object <code>eventRef</code> to his previous state when the component is created. Which means that the <code>name</code> property of the <code>eventRef</code> changes to 'Event Name' again, instead of staying with 'New Name` that was updated in the UI. I would like to preserve the state of the object after I submit the form. This is my Inertia response:</p>
  <pre><code>component: &quot;Events/EventNew&quot;
  props: {
    global: {} // Global object
  }
  url: &quot;/app/qa/events/new&quot;
  version: null
  </code></pre>
  <p>As you can see I'm not even getting the 'event' prop from the backend, so it shouldn't be updated. After reading Inertia docs I thought that a simple <code>preserveState:true</code> in the request options would do the job but this is not happening. Every time the server returns an Inertia response, the <code>eventRef</code> obj is 'reset'.</p>
  <p>What am I missing here? I would appreciate some help</p>