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 WITHOUT ROUTER -->
  <iframe :src="src"></iframe>
  <router-view></router-view>
</div>

JavaScript

let source = "%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fvue%403.0.0%2Fdist%2Fvue.global.js%22%3E%3C%2Fscript%3E%0A%3Cdiv%20id%3D%22app%22%3E%0A%20%20I%20can%20run%20in%20an%20iframe%20with%20%7B%7Bmsg%7D%7D!%0A%3C%2Fdiv%3E%0A%3Cscript%3E%0A%0Aconst%20app%20%3D%20Vue.createApp(%7B%20data%3A%20function()%20%7B%20return%20%7Bmsg%3A%20'Vue%20Next!'%7D%7D%20%7D)%0A%0Aapp.mount('%23app')%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')