JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
  <h1>
  Following are the components
  </h1>
  
  <br>
  <button @click="resuffle">
     Resuffle
  </button>


</div>

  
  <template type="text/x-template" id="comp1">
  <div>
    <span>This is component 1</span>
  </div>
</template>

<comp2 inline-template>
  <div>
    <span>This is component 2</span>
  </div>
</comp2>


<template id="comp32">
  <div>
    <span>This is component 3</span>
  </div>
</template>

JavaScript

Vue.component('comp1', {
  template: '#comp1', 
})

Vue.component('comp2', {

})
Vue.component('comp3', {
  template: '#comp3', 
})

new Vue({
	el: '#app',
  data: {
    compArray: ['comp1', 'comp2', 'comp3']
  },
  methods: {
    resuffle: function() {
       this.compArray.push(this.compArray[1])
       this.compArray.splice(1,1)
    }
  },
})