A modal component doesn't need to be created for each item in a for-loop.

Creating modals within a for-loop results in separate instances of modal components being created, all of which are bound to the same v-model. Consequently, only the last item's data will be passed because the last v-model will always be active.

This issue can be resolved by either passing the array index or creating a separate v-model using an object. However, it is best practice to place the modal component outside the for loop and use it appropriately by passing the data of each selected item as a prop.

So instead of creating modals in a for-loop, you can structure your code like this (dummy data used for UI creation):

PARENT COMPONENT -

<template>
    <div>
        <!-- To open dialog on click on any item -->
        <Dialog
            v-if="dialog && selectedApp"
            v-model="dialog"
            :app="selectedApp"
            @closeDialog="closeDialog"
        />

        <!-- Loop on items -->
        <v-col v-for="app in apps" :key="app._id" cols="12">
            <v-card class="pa-2 " outlined height="230px">
                <v-dialog v-model="dialog">
                    <template v-slot:activator="{ on: dialog, attrs }">
                        <v-tooltip right color="#363636" max-width="250px">
                            <template v-slot:activator="{ on: tooltip }">
                                <v-img
                                    :src="app.src"
                                    class="white--text align-end"
                                    gradient="to bottom, rgba(0,0,0,.5), rgba(0,0,0,.5)"
                                    height="85%"
                                    v-bind="attrs"
                                    v-on="{ ...tooltip, ...dialog }"
                                    @click="selectedApp = app"
                                >
                                    <v-card-title v-text="app.title"></v-card-title>
                                </v-img>
                            </template>
                            <span v-if="app.vpnRequired">VPN needed to run!</span>
                            <v-divider class="my-1" v-if="app.vpnRequired" dark></v-divider>
                            <span>{{ app.description }}</span>
                        </v-tooltip>
                        <h1>{{ app.link }}</h1>
                    </template>
                    <h1>{{ app.link }}</h1>
                </v-dialog>
                <v-card-actions mb-2>
                    <v-spacer></v-spacer>
                    <v-tooltip top color="#363636">
                        <template v-slot:activator="{ on, attrs }" v-if="app.quickActions">
                            <v-btn @click="DeleteAppFromQuickActions(app)" icon>
                                <v-icon v-bind="attrs" v-on="on">
                                    mdi-minus-box-outline
                                </v-icon>
                            </v-btn>
                        </template>
                        <template v-slot:activator="{ on, attrs }" v-else>
                            <v-btn @click="AddAppToQuickActions(app)" icon>
                                <v-icon v-bind="attrs" v-on="on">
                                    mdi-plus-box-outline
                                </v-icon>
                            </v-btn>
                        </template>
                        <span v-if="app.quickActions">Delete from QuickActions</span>
                        <span v-else>Add to QuickActions</span>
                    </v-tooltip>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-col>
    </div>
</template>

<script>
import Dialog from "/var/www/html/weresearchfrontend/src/Dialog.vue";

export default {
    name: "ParentComponent",

    data() {
        return {
            dialog: false,
            selectedApp: null,
            apps: [
                {
                    title: "A",
                    vpnRequired: true,
                    src: "https://source.unsplash.com/user/c_v_r/1900x800",
                    description: "Hello Google",
                    link: "https://google.com",
                    quickActions: true,
                },
                {
                    title: "B",
                    vpnRequired: true,
                    src: "https://source.unsplash.com/user/c_v_r/100x100",
                    description: "Hello Github",
                    link: "https://github.com",
                    quickActions: true,
                },
            ],
        };
    },

    components: {
        Dialog,
    },

    methods: {
        closeDialog: function() {
            this.dialog = false;
            // reset selected app also
            this.selectedApp = app;
        },
    },
};
</script>

CHILD COMPONENT (DIALOG COMPONENT) -

<template>
    <v-dialog :value="value">
        <v-card>
            <v-container fluid>
                <v-row>
                    <v-col fixed style="background:#363636;" class="d-flex" cols="12">
                        <span class="white--text font-weight-bold"
                            >{{ app.title }} > {{ app.description }} > {{ app.link }}</span
                        >
                        <v-spacer></v-spacer>
                        <v-btn plain color="grey" :href="app.link" target="_blank">
                            <v-icon>mdi-open-in-new</v-icon>
                        </v-btn>
                        <v-btn @click="$emit('closeDialog')" plain color="grey">
                            <v-icon>mdi-close-box-outline</v-icon>
                        </v-btn>
                    </v-col>
                    <v-col cols="12">
                        <iframe :src="app.link" width="100%" height="800px" frameborder="0">
                        </iframe>
                    </v-col>
                </v-row>
            </v-container>
        </v-card>
    </v-dialog>
</template>

<script>
export default {
    name: "Dialog",

    props: ["value", "app"],
};
</script>