title: How dynamically change the component with object for props in vueJS
body: <p>Do you know how to change a component dynamically with object prop</p>
  <p><strong>App.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;component :is=&quot;current['test'].target.name&quot;&gt; &lt;/component&gt;
      &lt;input type=&quot;button&quot; value=&quot;click me&quot; @click=&quot;change&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import HelloWorld from &quot;./components/HelloWorld&quot;;
  import Comp from &quot;./components/Comp.vue&quot;;
  
  export default {
    name: &quot;App&quot;,
    components: {
      HelloWorld,
      Comp,
    },
    data() {
      return {
        current: {},
      };
    },
    created() {
      this.current[&quot;test&quot;] = {
        index: 0,
        target: {
          name: &quot;Comp&quot;,
        },
      };
    },
    methods: {
      change() {
        const r =
          this.current[&quot;test&quot;].target.name === &quot;HelloWorld&quot;
            ? &quot;Comp&quot;
            : &quot;HelloWorld&quot;;
        this.current[&quot;test&quot;].target = {
          name: r,
        };
        console.log(this.current[&quot;test&quot;]);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p><strong>Comp.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;p&gt;Template 2&lt;/p&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>HelloWorld.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;p&gt;Template 1&lt;/p&gt;
  &lt;/template&gt;
  </code></pre>
  <p><em><a href="https://codesandbox.io/s/clever-water-dgbts?file=/src/components/HelloWorld.vue:0-42" rel="nofollow noreferrer">https://codesandbox.io/s/clever-water-dgbts?file=/src/components/HelloWorld.vue:0-42</a></em></p>
  <p>The value of the object will change correctly but not the component.</p>
  <p>Thank you</p>