[Vuejs]-Show mutiple v-dialog boxes with different content in vue.js

There must a design a pattern for this one but a quick solution would be to create array of booleans for v-models of dialogs. something like below

export default {
      data: () => ({
         faq,
         dialog: [] // Array instead of Boolean.
      }),
   }

and

<template v-for="item of faq">
    <div :key="item.category">
       <h4>{{ item.heading }}</h4>
       <div v-for="(subitems, index) of item.content" :key="subitems.qus">
          <v-dialog
             v-model="dialog[index]"
             width="500"
          >
             <template v-slot:activator="{on}">
                <a href="#" v-on="on">{{subitems.qus}}</a>
             </template>
             <v-card>
                <v-card-title
                   class="headline grey lighten-2"
                   primary-title
                   >
                   Privacy Policy
                </v-card-title>
                <v-card-text>
                   {{ subitems.ans }}
                </v-card-text>
                <v-divider></v-divider>
             </v-card>
          </v-dialog>
       </div>
    </div>
 </template>   

Brother, you are doing a very small mistake, you should not keep your v-dialog component inside your loop, take this out from loop block and don’t take dialog as empty array keep it false.

if you want to loop over the v-dialog your v-model value need to be an array of booleans where you pass the index in like this v-model ="arrayOfBoolean[i]". then simple create two function to open and close based on the index value. to open you set the selected index to true and to close false. hope this helps.