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="pw" class="rtl">

        <pw 
        v-bind:id="profiledata.id"
        v-bind:name="profiledata.name"
        
        ></pw>
            
    </div>
    
<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"></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>{{foo}}</div>' 
}  
const Bar = { 
    props: ['name'],
    template: '<pw> {{name}}</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: ['id','name'],
        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%;"> 
                        שם : {{ name }} 
                    </div> 
                    
                </div>`
    })
        
    
    
    
    var pw = new Vue({
    el: '#pw',
    
    data:  {
        profiledata:{"id":"5","name":"yeled","img":"copy.jpg","n_pic_Matching":8} 
    }
    
    })
    






// 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: "asdasdas"}
  }
})

// Now the app has started!