Setting up the initial values of a form using props

[MaelAbgrall]

Hello,

Quite new using VueJS, I'm trying to make my form into a component (so the form can be used both to edit existing content or to create new content).

I started to create the form in a view, and put initial values as explained in the documentation.

However when I started to refactor the view to make the form into a component, the :initialvalues="formValues" do not work anymore: I'm passing an object as a prop with the field values (the "create" view would send an object with empty variables, and the "edit" view should send an object with the original data). I checked and the props are send properly to the component, however the fields are empty

here is a minimal reproduction: view.vue

<template>
  <CategoryEditor :preFormValues="{
        title: 'hello',
        description: 'desbziauefdbpzidhubf'
    }"
  />
</template>

<script>
// components
import CategoryEditor from "@/components/categories/CategoryEditor.vue"

export default {
  name: "CreateCategory",
  components: {
    CategoryEditor,
  },
};
</script>

and the CategoryEditor.vue

<template>
    <Form :validation-schema="schema" @submit="submitForm" :initialValues="formValues">
      <div>
        <div>
          <label for="title">Title:</label>
          <Field type="text" required="true" id="title" name="title"/>
          <FormErrorMessage errorMessageName="title" errorMessageID="titleError"/>
        </div>
        
        <div>
          <label for="description">Description (optional):</label>
          <Field type="text" id="description" name="description"/>
        </div>
      </div>
      <div>
        <button class="validate" type="submit" data-test="submit-btn" v-if="isFormLoading == false">Create</button>
      </div>
    </Form>
</template>

<script>
// project libs
import { Form, Field, useForm } from "vee-validate";
import * as yup from 'yup';
// components
import FormErrorMessage from "../../components/FormErrorMessage.vue"

export default {
  name: "CategoryEditor",
  components: {
    ErrorMessage,
    Form,
    Field,
    FormErrorMessage,
    FullScreenLoadingIcon,
  },
  props: ['preFormValues'],
  data () {
    const formValues = this.preFormValues;
    console.log(formValues);
    return {
      isFormLoading: false,
      requestErrorMessage: null,
      formValues,
    }
  },
  methods: {
    /**
     * send the form values to the backend, and either redirect to the freshly created category
     */
    async submitForm({title, description}, { resetForm }){
      // ... some code
      // if this is a success, redirect to the new page
      if(this.isSuccess === true) {
        this.$router.push(
          // push to created content
        );
      }
      // if this is not a success, show the error message and set the initial values with what the user tried to send
      else {
        this.formValues = {
          title: title,
          description: description,
          modonly: modonly,
          hidden: hidden,
          parent: parent
        }
      }
    },
  },
  computed: {
    /**
     * Validation schema used by yup and vee to validate form fields
     */
    schema () {
      return yup.object({
        title: yup
                .string()
                .required("You need a unique title")
                .min(4)
                .max(30)
                .matches(
                  /^[a-zA-Z0-9 _-]+$/,
                  "Title must only contain letters, numbers, underscores, and hyphens"
                ),
      })
    },
  },
};
</script>

Update:
While trying to work on something else, I found that this issue was happening only when:

1. Going to the page and reloading it (F5)
2. OR when loading the page from scratch

If I'm navigating to this page from somewhere else, the inputs are pre-populated with the data