Nested splade file component does not bind to its parent but to the form component directly

[Cyril Fehintoluwa]

• Laravel Version: 10.23.1
• PHP Version: 8.1.13
• Splade JS Version (npm): 1.4.16
• Splade PHP Version (composer): 1.4.16
• Dev environment (OS, Sail/Valet/etc): Windows 10 Pro. / WAMP

You may use the built-in Artisan Command to show the installed versions of the packages:

php artisan splade:show-versions

Make sure both Splade packages (JS + PHP) are up-to-date and on the same version. For example, when using version 0.5.0 of the PHP package, you should use the same JavaScript package version.

Description:

I have the following where the products and the colors are created by pushing into the arrays products and colors respectively.
A lot of the code was omitted for conciseness.

<x-splade-form default="{
    products: [
      {  
       colors: [
         {
           image: '',
           parent_index': '',
           // parent index receives the index of the product it is nested in 
         }
       ]
      }
    ]
 }"
>

<template v-for="(product, index) in form.products" key="index">

  <template v-for="(color, index) in product.colors" key="index">
  
  <x-splade-file filepond preview
      v-model="color.image"
      label="Color"
  />
  </template>
</template>
</x-splade-form>

I have been trying to bind the color.image to products.${color.parent_index}.colors.${index}.image which holds the value products.0.colors.0.image
Passing products.0.colors.0.image directly to v-model works but I need to compose this dynamically so it works for subsequent items(products, color)

Steps To Reproduce Issue:

I have tried the following and they have all failed

  <x-splade-file filepond preview
      v-model="color.image"
      label="Color"
  />

<x-splade-data default="{
    image: `products.${color.parent_index}.colors.${index}.image`,
}">
  <x-splade-file filepond preview
      v-model="data.image"
      label="Color"
  />
</x-splade-data>