JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.global.js"></script>
<div id="app">
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- RENDERS CORRECTLY IN VUE 2 -->
  <iframe :src="src"></iframe>
  <router-view></router-view>
</div>

JavaScript

let source = "%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fvue%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fvue-router%22%3E%3C%2Fscript%3E%0A%3Cdiv%20id%3D%22app%22%3E%0A%7B%7Bmsg%7D%7D%0A%20%20%3Cp%3E%0A%20%20%20%20%3Crouter-link%20to%3D%22%2F%22%3EGo%20to%20Home%3C%2Frouter-link%3E%0A%20%20%20%20%3Crouter-link%20to%3D%22%2Fabout%22%3EGo%20to%20About%3C%2Frouter-link%3E%0A%20%20%3C%2Fp%3E%0A%20%20%3Crouter-view%3E%3C%2Frouter-view%3E%0A%3C%2Fdiv%3E%0A%3Cscript%3E%0Aconst%20routes%20%3D%20%5B%0A%20%20%7B%20path%3A%20'%2F'%2C%20component%3A%20%7B%20template%3A%20'%3Cdiv%3EHome%3C%2Fdiv%3E'%20%7D%20%7D%2C%0A%20%20%7B%20path%3A%20'%2Fabout'%2C%20component%3A%20%7B%20template%3A%20'%3Cdiv%3EAbout%3C%2Fdiv%3E'%20%7D%20%7D%2C%0A%5D%0A%0Aconst%20router%20%3D%20new%20VueRouter(%7B%20%0A%20%20base%3A%20'%2F'%2C%0A%20%20method%3A%20'history'%2C%0A%20%20routes%0A%7D)%0AVue.use(router)%0Anew%20Vue(%7B%20el%3A%20%22%23app%22%2C%20router%2C%20data%3A%20function()%20%7B%20return%20%7Bmsg%3A%20'Vue%202%20%26%20router!'%7D%7D%20%7D)%0A%3C%2Fscript%3E"
console.log(decodeURIComponent(source))

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

const app = Vue.createApp({ data: function() { return {src: 'data:text/html,' + source } } })
app.use(router)
app.mount('#app')