[Bug] in browser Chrome, filepond not display image preview immediatly when set files

[scil]

Is there an existing issue for this?

• [X] I have searched the existing issues

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

• [X] I have updated FilePond and its plugins

Describe the bug

apply files to filepond , the image preview not appear until clicking vue components in Vue Devtools.

this issue only found in browser chrome, not firefox.

in normal situation, the related html code (.filepond--image-preview-wrapper > div.filepond--image-preview > div > div > div) is like

<div class="filepond--image-bitmap" style="transform: scale3d(1, 1, 1);">
   <canvas width="736" height="460"></canvas>
</div>

but when the preview not display, the html code is

<div class="filepond--image-bitmap" style="transform: scale3d(1, 1, 1);">
</div>

there is no canvas until I open vue devtools and click inside.

Reproduction

file-uploader.vue

<template>
    <file-pond
      name="test"
      ref="pond"
      accepted-file-types="image/*"

      :label-idle="labelIdle"
      :files="setFiles"
    />
</template>

<script>
// Import Vue FilePond
import vueFilePond, { setOptions } from "vue-filepond";

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Import image preview plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";

import FilePondPluginFileMetadata from "filepond-plugin-file-metadata"
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginImageValidateSize from "filepond-plugin-image-validate-size";
import FilePondPluginImageCrop from "filepond-plugin-image-crop";

// Create component
const FilePond = vueFilePond(
    FilePondPluginFileMetadata,
    FilePondPluginFileValidateType,
    FilePondPluginImagePreview,
    FilePondPluginImageValidateSize,
    FilePondPluginImageCrop
);

export default {
  name: "file-uploader",
  components: {
    FilePond,
  },
  props: {
    labelIdle:  {type:String,},
    setFiles: {type: Array, default: function(){return [];}},
  },
  data: function () {
    return {
    };
  },

};
</script>

use this vue components in a c# Razor file

<file-uploader :use-oc-media-upload="useOCMediaUpload" v-model="currentFileObjects" :set-files="setFiles" :delete-url="deleteUrl" :label-idle="labelIdle" :upload-url="uploadUrl"/>

<script>
window.appHalfForm = new Vue({

  data: {
            labelIdle:' set img',
            setFiles:[
                {
                    source:"@Html.Raw(Model.CoverImg)",
                    options: {type:'local',},
                },
            ],

},

});
</script>

temp cure

Now to make the picture preview show, I use appHalfForm.$data.labelIdle +=' '.
I tried appHalfForm.$forceUpdate() but not worked.

  mounted:function () {
    this.updateCoverImgPeview()
  },
  methods:{

     updateCoverImgPeview: function(){
         var me = this;
         setTimeout(function(){
            me.labelIdle +=  ' ';
         }, 500)
     },
},

I use a file explorer and also call this updateCoverImgPevie when selecting a img for cover img. the setTimeout is necessary for my file explorer.

Environment

- Device: PC
- OS: windows 10
- Broser: chrome 103
- Vue version: Vue 2.6.14

[FrankCJC]

Can you even make code in browser section work?

[scil]

thank you. but do you mean by " code in browser section"?