treeview на vue
 

Все здравия!
Делаю на VUE визуальное представление js структуры в виде древовидного объекта. Делаю это рекурсивно.
Код примерно такой:

template: `
    <ul class="Container">
      <template v-for="child,key in object">
        <template v-if='typeof(child) ==="object"'>
          <li v-if="check(key)" class="Node ExpandOpen">
            <div class="Expand "></div>
            <div class="Content">{{key}}</div>
            <node :object="child"></node>
          </li>
          <li v-else class="Node ExpandClosed" v-on:click="treeEvent(key)">
            <div class="Expand "></div>
            <div class="Content">{{key}}</div>
          </li>
        </template>
        <li v-else class="Node ExpandLeaf">
          <div class="Expand"></div>
          <div class="Content">{{key}}:{{child}}</div>
        </li>
      </template>
    </ul>
    `,
    name: 'node',
    props: ["object"],
    data:()=>({ visual:{} }),
    methods : {
      check: function( index ){
        if(this.visual[index] === undefined ) return false;
        return this.visual[index];
      },
      treeEvent: function(key){
        if(this.visual[index] === undefined ) this.visual[index] = true;
        else this.visual[index] = !this.visual[index];
      }
    }

Все прекрасно отображается. и все уровни отрабатываются. Следующая задача - оживить это дело. т.е. нажимая мышкой чтобы уровни открывались и закрывались. Для решения этой задачи на каждом уровне рекурсии в компоненте был заведена структура - visual
события нажатия отрабатываются, но не происходит обновление картинки. Оно и понятно.........
может быть кто нибудь подскажет - стратегию. Как в таком случае нужно поступить?
Спасибо

хочу подчеркнуть - у меня рекурсия компонентов. т.е. на каждом уровне доступен только текущий слой отображаемой структуры и все что ниже
получается как то так:

можно использовать
forceUpdate();
с блокировкой всплытия. с ним работает как надо. но это не интерстный вариант. Хотелось бы через :key. Но как? пока не соображу
Heeeeeelp!

fxobject,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

ну хорошо, фиг с ним, другой вопрос - а можно ли как то оформить компоненту в виде класса? чтобы было примерно так?

new Vue({
    el: "#app",
    components:{ tree1: new treeObject() },
    data: () => ({
      .........

т.е. в каком нибудь месте подгружу модуль в виде класса (не объекта, а его описания) и где нужно создам как новый объект. что скажете?