JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    
<div id="appaa">
    <h1>Hello App!</h1>
    <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- <router-link> will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view :foo="foo" :bar="bar"></router-view>

</div>

CSS

.router-link-active {
  color: red;
}

Babel + JSX

// 0. If using a module system, call Vue.use(VueRouter)

// 1. Define route components.
// These can be imported from other files
const Foo = { 
     
    props: ['foo'],
    template: `<todo-item
        v-for="item in foo"
        v-bind:todo="item"
        v-bind:key="item.id"
        > 
        </todo-item>` 
}  
const Bar = { 
    props: ['bar'],
    template: '<pw v-bind:bar="bar"> </pw>' }

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes
})





    Vue.component('pw', {
        props: ['bar'],
        template: `<div style="display: flex; flex-flow: row wrap; min-height: 90px; padding: 5px; border-radius: 6px; margin: 5px; border: double; border-color: green;" class="divprofile">
                    <div style="width: 30%;height: 40%;"> 
                        שם : {{ bar.name }} 
                    </div> 
                    
                </div>`
    })
        
    
   

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const appaa = new Vue({
    el: '#appaa',
  router,
  data: function(){
  	return {
    	foo: { "id": "5", "name": "yeled" },
    	bar:{"id":"5","name":"yeled"}}
  }
})

// Now the app has started!



Vue.component('todo-item', {
    props: ['todo'],
    template: `
             
                < div style = " min-height: 90px; padding: 5px; border-radius: 6px; margin: 5px; border: double; border-color: green;" class="divprofile" >
            
            <div style="width: 30%;height:...