动态更改外部组件的 props

如何解决动态更改外部组件的 props

我是 VueJS 的新手，不幸的是我不知道如何更改此外部组件 vue-compare-two-images-component 的 :leftimage 和 :rightimage 道具。 它正在工作，然后道具值设置为 null。但是如果 props 得到一个图像 src，它们就不会对新的值变化做出反应。

我的目标是根据按钮点击动态更改道具值。 有人知道如何实现这一目标吗？

<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>