title: How to create a tree-view in vue-js with clickable components opening up a vue-js modal?
body: <p>I want to create a tree-view component in Vue-JS to display my JSON data. But I have an additional requirement where I need to launch a VueJS modal on clicking any of the data fields of JSON view. I looked up at several <code>npm modules</code> that does display data in tree-view but I am not sure how to modify them to make them clickable and launch <code>vue-js modal</code>.
  This is the code I am currently using to display tree-view but none of the fields are clickable.</p>
  
  <p><code>assets.vue</code></p>
  
  <pre><code>    &lt;template&gt;
  
    &lt;div&gt;  
  
          &lt;h1&gt;The Assets Page&lt;/h1&gt;
          &lt;!--&lt;p&gt;{{response}}&lt;/p&gt;--&gt;
          &lt;tree-view v-on:click="openGroupModal()" :data="response._embedded.assets" :options="{maxDepth: 0, rootObjectKey: 'Assets'}"&gt;&lt;/tree-view&gt;
        &lt;/div&gt;
  
  &lt;/template&gt;
  &lt;script&gt;
  import axios from 'axios'
  import GroupModal from '../assets/assetdetails.vue'
  import Vue from 'vue'
  import VModal from 'vue-js-modal'
  Vue.use(VModal, { dynamic: true })
  
  export default {
    name: 'service',
    data () {
     return {
     response: [],
     errors: []
     }
     },
     
   created () {
        this.callRestService()
      },
   methods: {
     callRestService () {
      axios.get('http://localhost:8080/rest/assets')
     .then(response =&gt; {
     // JSON responses are automatically parsed.
     this.response = response.data
     })
     .catch(e =&gt; {
      this.errors.push(e)
    })
  },
  openGroupModal(){
  
    this.$modal.show(GroupModal,
    {
        draggable: true,
        resizable: true,
        scrollable: true,
        height: "auto",
        width:"50%"
      })
  }
   }
  }
  &lt;/script&gt;
  &lt;style&gt;
  &lt;/style&gt; 
  </code></pre>
  
  <p><code>main.js</code></p>
  
  <pre><code>// The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import VModal from 'vue-js-modal'
  import App from './App.vue'
  import TreeView from 'vue-json-tree-view'
  
  import { routes } from './routes';
  
  
  Vue.use(VueRouter);
  Vue.use(VModal, { dynamic: true })
  Vue.use(TreeView)
  //Vue.config.productionTip = false
  
  const router = new VueRouter({
  
    routes  
  });
  
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '&lt;App/&gt;'
  })
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p><strong>UPDATE</strong>: I tried Jacob's answer but that didn't help me launch the modal. I tried this:</p>
  
  <pre><code>&lt;template&gt;
  
    &lt;div&gt;  
  
          &lt;h1&gt;The Assets Page&lt;/h1&gt;
          &lt;!--&lt;p&gt;{{response}}&lt;/p&gt;--&gt;
          &lt;div @click.capture="openGroupModal($event)"&gt;
          &lt;tree-view :data="response._embedded.assets" :options="{maxDepth: 0, rootObjectKey: 'Assets'}"&gt;&lt;/tree-view&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  &lt;/template&gt;
  &lt;script&gt;
  import axios from 'axios'
  import GroupModal from '../assets/assetdetails.vue'
  import Vue from 'vue'
  import VModal from 'vue-js-modal'
  Vue.use(VModal, { dynamic: true })
  
  export default {
    name: 'service',
    data () {
     return {
     response: [],
     errors: []
     }
     },
     
   created () {
        this.callRestService()
      },
   methods: {
     callRestService () {
      axios.get('http://localhost:8080/rest/assets')
     .then(response =&gt; {
     // JSON responses are automatically parsed.
     this.response = response.data
     })
     .catch(e =&gt; {
      this.errors.push(e)
    })
  },
  openGroupModal($event){
    console.log("The console message",$event.target);
    this.$modal.show(GroupModal,
    {
        draggable: true,
        resizable: true,
        scrollable: true,
        height: "auto",
        width:"50%"
      })
  }
   }
  }
  &lt;/script&gt;
  &lt;style&gt;
  &lt;/style&gt; 
  </code></pre>