JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue-w3c-valid/dist/simple.js"></script>
<script src="https://unpkg.com/vue"></script>

<div class="directivesValid">
	<input type="button" value="change" data-v-on_click.prevent="ordered = !ordered">
	<ol data-v-if="ordered">
		<li data-v-for="item in items">{{ item }}</li>
	</ol>
	<ul data-v-else>
		<li data-v-for="item in items">{{ item }}</li>
	</ul>
	<div data-vue-role="transition" data-vue-name="fade" data-vue-mode="out-in">
		<input type="text" data-v-bind_value="ordered" data-v-show="ordered">
	</div>
	<div data-vue-role="some-div">
		<p>Message</p>
		<p data-vue-slot="footer">Message</p>
	</div>
</div>

CSS

.fade-enter{
	opacity: 0;
}

.fade-enter-active{
	transition: opacity 0.5s;
}

.fade-leave-active{
	transition: opacity 0.5s;
	opacity: 0;
}

JavaScript

new VueW3CValid({
	el: '.directivesValid'
});

Vue.component('someDiv', {
		template: '<div class="some">\
				<hr>\
				<slot></slot>\
				<hr>\
				<slot name="footer"></slot>\
				<hr>\
			</div>'
});
  
new Vue({
	el: '.directivesValid',
	data: {
		items: ['a', 'b', 'c'],
		ordered: false
	}
});