[Bug] stylePanelLayout messes the rest of the functionality (Example not working in Vue3)

[michaelkonstantinou]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• I have updated FilePond and its plugins

Describe the bug

Hello and thank you for your work on FilePond. The workflow is smooth and modern, hence why I chose it

I had an issue when I integrated vue-filepond on a new Vue 3 project

You see, I am trying to integrate the example shown in the website: [https://pqina.nl/filepond/#profile-picture-demo](Profile picture example)

However. What I noticed is that while the look is the same (circular and same colors)... the functionality is not the same when I upload a picture. Basically, nothing is changing (literally the design stays the same without any animations). I would like it to work just like the example, to show that it is being uploaded, its progress and the button to "cancel" the uploading. Yet... nothing happens in the UI, I only know that I uploaded something because I checked the console logs.

Here is the workflow and my code:
UI

<FilePond
                name="image"
                ref="user-profile-picture"
                label-idle="Set profile picture..."
                allow-multiple="false"
                accepted-file-types="image/jpeg, image/png"
                max-file-size="1MB"
                stylePanelLayout="compact circle"
                styleLoadIndicatorPosition="center bottom"
                styleProgressIndicatorPosition="right bottom"
                styleButtonRemoveItemPosition="center bottom"
                :allowImagePreview="true"
                :imagePreviewHeight="150"
                imageCropAspectRatio="1:1"
                :imageResizeTargetWidth="150"
                :imageResizeTargetHeight="150"
            />

Script

// Import FilePond
import vueFilePond, {setOptions} from 'vue-filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageResize from 'filepond-plugin-image-resize';
import FilePondPluginImageCrop from 'filepond-plugin-image-crop';
import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
import FilePondPluginImageEdit from 'filepond-plugin-image-edit';

setOptions({
    server: {
        process: {
            url: "/api/upload-image",
            headers: {
                'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').getAttribute("content")
            }
        }
    },
});

// Create FilePond component
const FilePond = vueFilePond(FilePondPluginImageEdit, FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginImageCrop, FilePondPluginImageTransform);

Reproduction

To reproduce the bug, please copy the code snippets I provided and execute this in a brand new Vue3 application.

Environment

- Device: Mac M3
- OS: iOS
- Browser: Firefox
- Vue version: 3.5

[rikschennink]

Hi, Can you fork this project and create a reproduction:
https://stackblitz.com/github/pqina/pintura-example-vue-3?file=src%2FExampleFilePond.vue