JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue-blocks/dist/vue-blocks.js"></script>
<app></app>

<template component="app">
   <div>
		<router-view
			:state="state"
			@updateState="updateState"
		></router-view>
		
		<pre>Parent state: {{state}} </pre>
	</div>
	<script>
		export default {
			data() {
				return {
					state: {
						name: 'name',
						lastname: 'lastname'
					}
				}
			},
		   methods: {
				updateState(state) {
					this.state = state;
				}
			}
		}
	</script>
</template>

<template url="/" props="state">
	<div>
		Route 1: State is: 
		<pre>{{state}}</pre>
		<div>
			Name: <input v-model="state.name">
			<button @click="$emit('updateState', state)">Save</button><br>
		</div>
		<router-link to="/page2">Next step</router-link>
	</div>
</template>

<template url="/page2" props="state">
	<div>
		Route 2: State is <pre>{{state}}</pre>
		Last name: <input v-model="state.lastname">
		<button @click="$emit('updateState', state)">Save</button><br>
		<router-link to="/">Previous page</router-link>
	</div>
</template>