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">
    <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>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view :foo="foo" ></router-view>

</div>

CSS

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

JavaScript

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

// 1. Define route components.
// These can be imported from other files
const Foo = { 
    methods: {
    	action: function(s) { alert(s); 
       
   var path = "appaa.$data.foo" + ".chatuna.rikudim.rikudimrishonim";
   alert( getNestedObj(appaa.$data.foo, path.split('.') ));
   },

    },
    props: ['foo'],
    template: `
    <div>
        <todo-item
            v-for="item in foo"
            v-bind:todo="item"
            v-bind:key="item.id"
            v-on:clicked="() => action(item.name)"
            > 
        </todo-item> 
    </div>` 
}  


// 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 },
]

// 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
})


    
   

// 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 {
    	action: (s) => console.log(s),
    	foo:[  {chatuna: { rikudim: { rikudimrishonim: {"id": "3","name": "yeled" } } } }]
      }
  }
})

// Now the app has started!



Vue.component('todo-item', {
    props: ['todo'],
      methods: { 
  eventAtClick: function() {
  		this.$emit("clicked");
  	}
  },
    template: `
    <div v-on:click="eventAtClick" 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%;"> 
            לחץ כאן : {{ todo.chatuna.rikudim.rikudimrishonim.name }} 
            </div> 
  ...