title: using vuetify overlay in datatable
body: <p>So I have a datatable of images that I want to expand in an overlay tag on click.
  To do that, I created an array for each column of the table and I mapped it to its corresponding image.
  Here's the code :</p>
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
             
      &lt;app-navbar /&gt;
  
      &lt;v-main&gt;
        &lt;div class=&quot;text-center&quot;&gt;
        &lt;h3&gt;
          test {{ $route.params.name }}, {{ $route.query.status }},{{
            $route.query.tag
          }}
        &lt;/h3&gt;
        &lt;/div&gt;
  
    
          &lt;v-data-table
      :headers=&quot;headers&quot;
      :items=&quot;imagesref&quot;
      :items-per-page=&quot;5&quot;
      class=&quot;elevation-1&quot;
    &gt;
    &lt;template v-slot:[`item.index`]=&quot;{ index }&quot;&gt;
       
          {{index+1}}
    &lt;/template&gt;
    
    &lt;template v-slot:[`item.ref`]=&quot;{ index }&quot;&gt;
          &lt;v-img :src=&quot;imagesref[index]&quot; max-width=&quot;750&quot; max-height=&quot;750&quot;   @click=&quot;expref[index] = !expref[index]&quot;/&gt;
          &lt;v-overlay :value=&quot;expref[index]&quot;&gt;&lt;v-img :src=&quot;imagesref[index]&quot; max-width=&quot;1300&quot; max-height=&quot;900&quot; @click=&quot;expref[index] = !expref[index]&quot;/&gt; &lt;/v-overlay&gt;
          
    
    &lt;/template&gt;
     &lt;template v-slot:[`item.test`]=&quot;{ index }&quot;&gt;
       
          &lt;v-img :src=&quot;imagestest[index]&quot; max-width=&quot;750&quot; max-height=&quot;750&quot; @click=&quot;exptest[index] = !exptest[index]&quot;/&gt;
          &lt;v-overlay :value=&quot;exptest[index]&quot;&gt;&lt;v-img :src=&quot;imagestest[index]&quot; max-width=&quot;1300&quot; max-height=&quot;900&quot; @click=&quot;exptest[index] = !exptest[index]&quot;/&gt; &lt;/v-overlay&gt;
  
    &lt;/template&gt;
       &lt;template v-slot:[`item.res`]=&quot;{ index }&quot;&gt;
       
          &lt;v-img :src=&quot;imagesresult[index]&quot; max-width=&quot;750&quot; max-height=&quot;750&quot; @click=&quot;expres[index] = !expres[index]&quot;/&gt;
          &lt;v-overlay :value=&quot;expres[index]&quot;&gt;&lt;v-img :src=&quot;imagesresult[index]&quot; max-width=&quot;1300&quot; max-height=&quot;900&quot; @click=&quot;expres[index] = !expres[index]&quot;/&gt; &lt;/v-overlay&gt;
  
    &lt;/template&gt;
    &lt;template #[`item.Scrubber`]=&quot;{ index }&quot;&gt;
      &lt;nuxt-link :to=&quot;{ path: 'scrubber', query: { imageref: imagesref[index],imagetest:imagestest[index],imageres:imagesresult[index] }}&quot;&gt;Show Scrubber&lt;/nuxt-link&gt;
  
    &lt;/template&gt;
    &lt;/v-data-table&gt;
  
  
      &lt;/v-main&gt;
   
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import appNavbar from &quot;../../../components/appNavbar.vue&quot;
  import axios from &quot;axios&quot;
  export default {
    components: { appNavbar },
    name: &quot;App&quot;,
    data() {
      return {
        expref:[],
        exptest:[],
        expres:[],
        items: [],
        imagesref: [],
        imagestest: [],
        imagesresult: [],
                headers: [
            { text: 'index',value: 'index',sortable:false},
            { text: 'Imagesref', value: 'ref',sortable:false },
            { text: 'Imagestest', value: 'test',sortable:false },
            { text: 'Imagesresult', value: 'res',sortable:false },
            { text: 'Scrubber', value: 'Scrubber',sortable:false },
          ]
      }
    },
    async created() {
      try {
        const res = await axios.get(`http://localhost:3004/tests`, {
          params: { name: this.$route.params.name },
        })
        this.items = res.data
        this.imagesref = res.data[0].refimages
        this.imagestest = res.data[0].testimages
        this.imagesresult = res.data[0].resultimages
        for (let i of this.imagesref){
          this.expref.push(false);
          this.exptest.push(false);
          this.expres.push(false);
        }
      } catch (error) {
        console.log(error)
      }
    }
  
  
    
  }
  &lt;/script&gt;
  
  &lt;style  scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  <p>When I tested it, after I click on the image the corresponding variable in the array changes its value to true but the overlay is not getting displayed but somehow when I change the value manually on devtools it works.Does someone have any idea what's going on and how can i make it work ?</p>