Vue Button List as File Input inside loop


When I click plus button, I want to upload image separately for each section inside the loop
But I got the result as this


    <div class="image_section">

        <img src="../../assets/variant4.png" class="step-image" />

        <h1>이미지 등록</h1>

        <p>사진을 클릭해, 각도 별 이미지를 등록해주세요.</p>

        <p>※ 차량 상태를 확인 할 수 있는 사진을 업로드 해주세요.</p>

            <h1>필수 이미지</h1>

            <ul>

                <li v-for="(image,index_image) in required_images" :key="index_image" class="required">

                    <input id="fileUpload" type="file" accept="image" @change="onFilePicked" class="file" :ref="index_image" style="display: none;">                    

                    <button  class="image_button" @click.once="chooseFiles()">

                        <p> <img src="../../assets/plus.png" class="plus" v-if="visible"/></p>

                        <p v-for="(image_file,image_id) in image_files" :key="image_id">

                            <img v-if="image_id == index_image"  :src="image_file.src" class="" style="height:120px;width:120px;"/>

                        </p>

                    </button>

                    <h1>{{ image.text }}</h1>

                </li>

            </ul>

            <ul>

                <li v-for="(optional_image,id_images) in optional_images" :key="id_images + 'A'" class="optional">

                    <h1>{{ optional_image.text }}</h1>

                    <input id="file" type="file" accept="image"  hidden>

                    <button  class="image_button" >

                    <img src="../../assets/plus.png" class="plus"/>

                    </button>

                </li>

            </ul>

    </div>

</template>

<script >

export default {

    data() {

        return {

            required_images: [

                { text: '정면'},

                { text: '좌측면'},

                { text: '우측면'},

                { text: '좌측'},

                { text: '우측'},

                { text: '후면' },

                { text: '좌후면'},

                { text: '우후면'},

                { text: '지붕'},

            ],

            optional_images:[

                { text: '레이아웃'},

                { text: '실내'},

                { text: '옵션'}

            ],

            images:[],

            image_files:[],

            selected:'',

            visible:true

        }

    },

    methods:{

        chooseFiles()

        {

          let fileInputElement =  document.getElementById("fileUpload").click()

          console.log(fileInputElement)

           let another = document.getElementById("fileUpload").value;

           console.log(another);

        },

        onFilePicked(event){

            const selected_image = event.target.files[0];    

            console.log(event.target.files);    

            let img = {

                    src: URL.createObjectURL(selected_image),

                    file: selected_image

            };

            console.log(this.$refs);

            this.visible = false;

            this.image_files.push(img);

        }

    }

}

</script>

Seperate the looped code into a component so you can track each buttons state individually.