Vue: dynamically rearrange children of a component

[obonyojimmy]

i have a vue component with children as below , id like to rearrange the children when a certain event occurs , how would i achieve this ?

<template>
    <div>
       <child-one></child-one>
       <child-two></child-two>
    </div>
</template>
<script>
   module.exports = {

      components: {
         'child-one' : require('./child1.vue'),
         'child-two' : require('./child2.vue')

      },
    events: {
         'rearrange': function (d) { 
            // dynamically rearrange 'child-one' and 'child-two'
          }
   }
</script>

[yyx990803]

Use an array to drive the children:

<component v-for="type in comps" :is="type"></component>

module.exports = {
      data: function () {
          return { comps: ['child-one', 'child-two'] }
      },
      components: {
         'child-one' : require('./child1.vue'),
         'child-two' : require('./child2.vue')

      },
    events: {
         'rearrange': function (d) { 
            this.comps.reverse()
          }
   }