Change props of external component dynamically

I'm new to VueJS and unfortunately I can't figure out how to change the :leftImage and :rightImage props of this external component vue-compare-two-images-component. It's working then the props values are set to null. But if the props get a image src they not react to new value change.

My goal is to change the props value dynamically based on the button click. Does someone knows how to achieve this?

<template>
    <ClientOnly>
        <img :src="imageBefore" > 
        <ul>
            <li><button class="button is-primary"  @click="Audi()">audi</button></li>
            <li><button class="button is-primary"  @click="Tesla()">tesla</button></li>
            <li><button class="button is-primary"  @click="Porsche()">porsche</button></li>
            <li><button class="button is-primary"  @click="reset()">resel all</button></li>
        </ul>
        <compare-two-images v-if="imageBefore"  
            :leftImage="imageBefore"
            :rightImage="imageAfter">
        </compare-two-images>
    </ClientOnly>
</template>

export default {
  name: 'Image Before-After',
  components: { CompareTwoImages },
  data () {  
    return {
          imageBefore: null,   // default null or some src
          imageAfter: null,
        }
  },
  methods: {
        reset(){
            this.imageBefore= null, this.imageAfter= null
      },
        Audi(){
            this.imageBefore =  '/assets/audi-before.jpg',
            this.imageAfter =  '/assets/audi-after.jpg'
        },
        Tesla(){
            this.imageBefore = '/assets/tesla-before.jpg',
            this.imageAfter = '/assets/tesla-after.jpg'
        },
        Porsche(){ 
            this.imageBefore = '/assets/porsche-before.jpg',
            this.imageAfter = '/assets/porsche-after.jpg'
        }
  }
}
</script>