Nuxtjs + Vuetify Display img with v-for after click on link

Question

When click on any link to get data for call image for display

<a @click="loadImg('01')">01</a>
<a @click="loadImg('02')">02</a>

<v-col v-for="(n,i) in listImg">
    <v-img :src="require(`${n}`)"></v-img>
</v-col>

javascript:

let pj = {
    "01": [
        "~/assets/images/01/01.jpg",
        "~/assets/images/01/02.jpg",
        "~/assets/images/01/03.jpg"
    ]
    "02": [
        "~/assets/images/02/01.jpg",
        "~/assets/images/02/02.jpg"
    ]
 }

How can I do it to get for Result

sample click li#02

<img src="imgPath/01.jpg">
<img src="imgPath/02.jpg">

Answer 1

use @click.prevent instead of @click

new Vue({
  el: '#app',
  data(){
    return {
      imgList: [],
      pj:{
        "01": [
            "https://i.stack.imgur.com/VSjd1.png",
            "https://i.stack.imgur.com/VSjd1.png"
        ],
        "02": [
            "https://i.stack.imgur.com/rXjqJ.png",
            "https://i.stack.imgur.com/rXjqJ.png"
        ]
     } 
    } 
  },
  methods:{
    loadImg(index){
      this.imgList = this.pj[index];
    } 
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app">
  <a @click.prevent="loadImg('01')">load 1</a>
  <a @click.prevent="loadImg('02')">load 2</a>
  
  <ul>
    <li v-for="(n,i) in imgList">
      <img :src="imgList[i]"/>
    </li>
  </ul>
</main>

but for accessibility, it's a better way to use <button> instead of <a>.