title: Change props of external component dynamically
body: <p>I'm new to VueJS and unfortunately I can't figure out how to change the <code>:leftImage</code> and <code>:rightImage</code> props of this external component <a href="https://www.npmjs.com/package/vue-compare-two-images-component/v/1.0.4" rel="nofollow noreferrer">vue-compare-two-images-component</a>.
  It's working then the props values are set to <code>null</code>. But if the props get a image src they not react to new value change.</p>
  <p>My goal is to change the props value dynamically based on the button click.
  Does someone knows how to achieve this?</p>
  <pre><code>&lt;template&gt;
      &lt;ClientOnly&gt;
          &lt;img :src=&quot;imageBefore&quot; &gt; 
          &lt;ul&gt;
              &lt;li&gt;&lt;button class=&quot;button is-primary&quot;  @click=&quot;Audi()&quot;&gt;audi&lt;/button&gt;&lt;/li&gt;
              &lt;li&gt;&lt;button class=&quot;button is-primary&quot;  @click=&quot;Tesla()&quot;&gt;tesla&lt;/button&gt;&lt;/li&gt;
              &lt;li&gt;&lt;button class=&quot;button is-primary&quot;  @click=&quot;Porsche()&quot;&gt;porsche&lt;/button&gt;&lt;/li&gt;
              &lt;li&gt;&lt;button class=&quot;button is-primary&quot;  @click=&quot;reset()&quot;&gt;resel all&lt;/button&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;compare-two-images v-if=&quot;imageBefore&quot;  
              :leftImage=&quot;imageBefore&quot;
              :rightImage=&quot;imageAfter&quot;&gt;
          &lt;/compare-two-images&gt;
      &lt;/ClientOnly&gt;
  &lt;/template&gt;
  </code></pre>
  <pre><code>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'
          }
    }
  }
  &lt;/script&gt;
  </code></pre>