I'm trying to set the initial value of the image input field. The docs say that we need to provide an array of objects containing URLs. (link to docs)

I have set the value in the same format but it isn't working. Other fields ('text', 'email', etc) don't have this issue.

<template>
  <div class="w-full md:w-1/3">
    <FormulateForm
      :schema="formSchema"
      v-model="values"
      class="mt-6"
      @submit="submitHandler"
    />
    <button class="custom-button" type="button" @click="handlePopulateImage">
      Populate image
    </button>
  </div>
</template>

<script>
export default {
  name: "testForm",
  data() {
    return {
      values: {
        name: "",
        image: [],
      },
      formSchema: [
        {
          type: "text",
          name: "name",
          label: "Name",
          validation: "required",
        },
        {
          type: "image",
          name: "image",
          label: "Image",
          validation: "required",
        },
        {
          type: "submit",
          label: "Login",
        },
      ],
    };
  },
  methods: {
    handlePopulateImage() {
      // this works 👍-----------------------------
      this.values.name = "Test Name (edited)";

      // this doesn't work 😭----------------------
      this.values.image = [
        {
          url:
            "https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/John_Cena_July_2018.jpg/220px-John_Cena_July_2018.jpg",
          name: "test_name.png",
        },
      ];
    },
    submitHandler() {
      alert(`Thank you ${this.values.name}`);
    },
  },
};
</script>

<style scoped>
.custom-button {
  background-color: orange;
  padding: 1rem;
  border-radius: 5px;
}
</style>

Here is the link to the codesandbox: https://codesandbox.io/s/vue-formulate-demo-forked-y7288r?file=/src/components/TestForm.vue