[fxobject]

Все здравия!
Делаю на 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
события нажатия отрабатываются, но не происходит обновление картинки. Оно и понятно.........
может быть кто нибудь подскажет - стратегию. Как в таком случае нужно поступить?
Спасибо