vue1.vue

<template>
  <div>
    <ul>
      <taxon :arvore="portguês" taxon="Matemática"></taxon>
    </ul>
  </div>
</template>
<script>
import taxon from './components/teste'

export default {
  components: { taxon },
  data: () => ({
    'portguês': {
      living: {
        animals: {
          invertebrates: {
            crab: null,
            bee: null,
            ant: null
          },
          vertebrates: {
            fish: {
              shark: null
            },
            mammals: {
              rabbit: null,
              rat: null
            }
          }
        },
        plants: {
          flowering: {
            maize: null,
            paddy: null
          },
          'non-flowering': {
            algae: {
              seaweed: null,
              spirogyra: null
            },
            fungi: {
              yeast: null,
              mushroom: null
            },
            moss: null,
            fern: null
          }
        }
      }
    },
  })
}
</script>

vue2.vue

<template>
  <li>
    <div>
      {{taxon}}
      <span @click="alternar" v-if="existeFilho">[{{open ? '-' : '+'}}]</span>
      <button>Add</button>
      <button @click="remove(taxon, arvore)">Remove</button>
    </div>
    <ul v-show="open">
      <taxon
        v-for="(child, taxon, index) in arvore"
        :arvore="child"
        :taxon="taxon"
        :key="taxon"
      >
      </taxon>
    </ul>
  </li>
</template>

<script type="text/javascript">
export default {
  extends: {},
  mixins: [],
  name: 'taxon',
  components: {},
  props: {
    arvore: Object,
    taxon: String
  },
  watch: {
    arvore (arvore) {
      if (arvore) {
        debugger
      }
    },
    taxon (taxon) {
      if (taxon) {
      }
    }
  },
  data: () => ({
    nomeTela: 'Nome da Tela',
    open: false
  }),
  computed: {
    existeFilho () {
      return this.arvore !== null
    }
  },
  methods: {
    alternar () {
      this.open = !this.open
    },
    remove (value, teste) {
      console.log(value)
      console.log(teste)
      // let x = Object.keys(this.arvore)
      // for(let i = 0, max = x.length; i < max; i ++){
      //   if(x[i] === value){
      //     console.log(x[i] === value)
      //   }
      // }
    }
  },
}
</script>

<style scoped>

</style>