Как извлечь индекс из этой строки?

Я изучаю, как создать свой собственный компонент лайтбокса в vue. Я понял, как это сделать, но столкнулся с одной проблемой. Я не знаю, как получить доступ к этому индексу массива.

<LightBox
:thumbnail = "images[7]" :images = "images"></LightBox>

<template>
    <div>
        <a href = "" @click.prevent = "show">
            <img class = "thumbnail" :src = "thumbnail">
        </a>
        <div class = "lightbox" v-if = "visible" @click = "hide">
            <div class = "flex">
                <div class = "cursor left" @click.stop = "prev" :class = "{ 'invisible': !hasPrev() }">
                    <svg fill = "#ffff" version = "1.1" id = "Capa_1" xmlns = "http://www.w3.org/2000/svg"
                        xmlns:xlink = "http://www.w3.org/1999/xlink" width = "100px" height = "100px"
                        viewBox = "0 0 537.66 537.66" xml:space = "preserve"  stroke = "#ffff">

                        <g id = "SVGRepo_bgCarrier" stroke-width = "0" />

                        <g id = "SVGRepo_tracerCarrier" stroke-linecap = "round" stroke-linejoin = "round" />

                        <g id = "SVGRepo_iconCarrier">
                            <g>
                                <g>
                                    <path
                                        d = "M526.375,175.442H249.458l101.781-115.23c2.939-5.875-0.006-10.64-6.574-10.64H194.735 c-15.012,0.003-34.74,30.233-44.538,41.188C132.96,110.028,3.146,254.326,2.204,256.208c-2.938,5.875-2.938,15.404,0,21.279 L177.52,477.449c2.938,5.875,10.646,10.64,17.215,10.64h149.931c6.57,0,9.514-4.765,6.576-10.64l-98.746-114.347h273.879 c6.234,0,11.285-5.052,11.285-11.285v-165.09C537.66,180.494,532.609,175.442,526.375,175.442z" />
                                </g>
                            </g>
                        </g>

                    </svg>
                 
                </div>
                <div class = "lightbox-image" @click.stop = "">
                    <img :src = "images[index]">
                </div>
                <div class = "cursor right" @click.stop = "next" :class = "{ 'invisible': !hasNext() }">
                    <svg fill = "#ffff" version = "1.1" id = "Capa_1" xmlns = "http://www.w3.org/2000/svg"
                        xmlns:xlink = "http://www.w3.org/1999/xlink" width = "100px" height = "100px"
                        viewBox = "0 0 537.66 537.66" xml:space = "preserve" transform = "rotate(180)" stroke = "#ffff">

                        <g id = "SVGRepo_bgCarrier" stroke-width = "0" />

                        <g id = "SVGRepo_tracerCarrier" stroke-linecap = "round" stroke-linejoin = "round" />

                        <g id = "SVGRepo_iconCarrier">
                            <g>
                                <g>
                                    <path
                                        d = "M526.375,175.442H249.458l101.781-115.23c2.939-5.875-0.006-10.64-6.574-10.64H194.735 c-15.012,0.003-34.74,30.233-44.538,41.188C132.96,110.028,3.146,254.326,2.204,256.208c-2.938,5.875-2.938,15.404,0,21.279 L177.52,477.449c2.938,5.875,10.646,10.64,17.215,10.64h149.931c6.57,0,9.514-4.765,6.576-10.64l-98.746-114.347h273.879 c6.234,0,11.285-5.052,11.285-11.285v-165.09C537.66,180.494,532.609,175.442,526.375,175.442z" />
                                </g>
                            </g>
                        </g>

                    </svg>
                </div>


            </div>


        </div>
    </div>


</template>
<script>
export default {
    props: {
        thumbnail: {
            type: String,
            required: true,
        },
        images: {
            type: Array,
            default: () => [],
        },

    },
    data() {
        return {
            visible: false,
            index: 0,
        };
    },
    methods: {
        show() {
            this.visible = true;
            this.index = this.thumbnail.length 
    
        },
        hide() {
            this.visible = false;
            this.index = 0;
        },
        hasNext() {
            return this.index + 1 < this.images.length;
        },
        hasPrev() {
            return this.index - 1 >= 0
        },
        prev() {
            if (this.hasPrev()) {
                this.index -= 1;
            }
        },
        next() {
            if (this.hasNext()) {
                this.index += 1
            }
        }
    }
}
</script>

Я не понимаю, как это сделать, так как я не нашел никакого метода, который может извлечь его из этой строки. Я пытался использовать IndexOf(), lastIndexOf(), map(), slice(), но ни один из этих методов не работал у меня.