How to properly set up Vuetify slider and pop-up?

Question

Vue.js

I'm trying to set up a slider and pop-up using Vuetify.
1. Can't close pop-up;
2. When you click on the button, when you select 3 images, the first one always opens on the preview.

images

template
          v-row
            v-col(v-for="(item,index) in pictures", :key="index")
              v-item
                v-dialog(v-model="dialog[index]" )
                  template(v-slot:activator="{ on, attrs }")
                    v-img(v-on="on", v-bind="attrs", height="100", width="100", :src="item")
                  v-carousel
                    v-carousel-item(v-for="(item,index) in pictures", :key="index")
                      v-img(:src="item")
                  v-btn(@click="dialog[index]= false") {{dialog[index]}}
data:
 dialog: [],
pictures: ["https://picsum.photos/700","https://picsum.photos/400", "https://picsum.photos/500"],

Answer 1

Can't close pop-up

dialog: [],

dialog[index]= false

Someone inattentively read the documentation .

When you click on the button, when you select 3 images, the preview always opens the first one.

Not always, but at the first opening of each dialog.
By the way, it is not clear - why do you need three dialog boxes? Do one:

data: () => ({
  slide: null,
  dialog: false,
  ...
}),
methods: {
  openDialog(slideIndex) {
    this.slide = slideIndex;
    this.dialog = true;
  },
  ...
},

v-row
  v-col(v-for="(n, i) in pictures")
    v-item
      v-img(height="100", width="100", :src="n", @click="openDialog(i)")
  v-col(hidden="")
    v-dialog(v-model="dialog")
      v-carousel(v-model="slide")
        v-carousel-item(v-for="n in pictures")
          v-img(:src="n")
      v-btn(@click="dialog = false") close dialog