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: `
    <div>
        <todo-item
            v-for="item in foo"
            v-bind:todo="item"
            v-bind:key="item.id"
            
            > 
        </todo-item> 
    </div>` 
}  
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"}, {"id": "3","name": "yeled" }],//יש פעמיים כיון שיש 2 שדות
    	bar:{"id":"5","name":"yeled"}}
  }
})

// Now the app has started!



Vue.component('todo-item', {
    props: ['todo'],
    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">
  ...