VUEJS Binding Image urls dynamically

this is my json data which has the buttons and image urls mapping.

     buttonDetails=  [{
            "button1": {
                "name": "button1",
                "images": [{
                        "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                    },
                    {
                        "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                    },
                    {
                        "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                    }
                ]
            }
        },
        "button2": {
            "name": "button2",
            "images": [{
                    "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                },
                {
                    "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                },
                {
                    "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                }
            ]
        },
        "button3": {
            "name": "button3",
            "images": [{
                    "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                },
                {
                    "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                },
                {
                    "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                }
            ]
        }
    }]

Template Code which renders the all the buttons and image related to button1 while page loads.

<template>
                 <ul class="images-list" v-for="(button,index) in buttonDetails" v-if="index == button1">
                <li  v-for="image in button.images" v-if="image.style=='750WX750H'">

                    <img :src="image.url" alt="" @click="zoom1 = true"  @mousemove="moveBG">
                    <div class="image-hover" :style="{ backgroundImage: 'url(' + image.url + ')' }"></div>
                    <modal v-model="zoom1" class="image-zoom">
                        <div>
                            <img :src="image.url" :style="{transform:'translateY(' + translateY   + 'px)'}" @mousemove.self="onMouseMove($event)">
                        </div>
                    </modal>
                </li>

            </ul>

             <ul class="button-list">
                    <li v-for="button of this.buttonDetails"></a></li>
                </ul>
            </template>

So based on every button click i have to change the image source as per the given json in Buttondetails variable. Kindly guide me

via Chebli Mohamed