listout all the files of a folder to the right side of a container using vuejs

In my application, i have list of folders and each containing some files. I have to display those files while choosing particular folder. Those folder will be in left side.While selecting that folder, files will be listed out in right side.

my json is like this:

folders : [
        {id: 0, name: 'Animals', files:['cat.jpg','dog.jpg']},
        {id: 1, name: 'Birds',files:['crow.jpg','sparrow.jpg']},
        {id: 2, name: 'Area',files:['desert.jpg','river.jpg']}
    ]

So if i choose ‘Animals’ folder then two files will be listed out in right side.

Like these :

I am new to vuejs. How can i achieve this?

Answer

You can list the folders on the left side and a variable files on the right side that would be updated by those of the clicked folder each time:

new Vue({
     el: '#app',
     data(){
          return{
               folders : [
                    {id: 0, name: 'Animals', files:['cat.jpg','dog.jpg']},
                    {id: 1, name: 'Birds',files:['crow.jpg','sparrow.jpg']},
                    {id: 2, name: 'Area',files:['desert.jpg','river.jpg']}
               ],
               files: []
          }
     },
     methods:{
          showFiles(id){
               let f = (this.folders).filter(f=>{return f.id==id})[0];
               this.files = f.files;
          }
     }
});

.folders {
    float: left;
    width: 50%;
}
.files {
    margin-left: 50%;
}

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="app">
     <div class="folders">
          <ul>
               <li v-for="(folder,index) in folders" :key="index">
                    <a @click="showFiles(folder.id)">{{folder.name}}</a>
               </li>
          </ul>
     </div>
     <div class="files">
          <ul>
               <li v-for="(file,index) in files" :key="index">
                    {{file}}
               </li>
          </ul>
     </div>
</div>