Изменения Vue не обнаружены в массиве

причина, по которой вы не видите обновления, заключается в том, что у массива нет причин для пересчета. Вы обновляете this.$set(item, "expand", false); объект, который не является реактивным. Причина, по которой он не является реактивным, заключается в том, что вы не используете метод $set при создании объекта.

вот как это будет выглядеть, если вы правильно используете $set во время создания объекта.

    recursive(obj, newObj, level, parent, parentIndex) {
      obj.forEach(node => {
        this.$set(node, "level", level);
        this.$set(node, "expand", true);
        this.$set(node, "parentIndex", parent ? parentIndex : null);
        if (node.children && node.children.length !== 0) {
          this.$set(node, "leaf", false);
          this.$set(node, "parent", parent);
          newObj.push(node);
          this.recursive(
            node.children,
            newObj,
            node.level + 1,
            node,
            newObj.indexOf(node)
          );
        } else {
          this.$set(node, "leaf", true);
          this.$set(node, "parent", obj);
          newObj.push(node);
          return false;
        }
      });
    },

обратите внимание, что теперь вы можете использовать item.expand = false

    expandNode(item) {
      item.expand = false;
      // this.$set(item, "expand", false);  <== not needed
    }

вы можете увидеть в действии здесь

В качестве альтернативы...

Вот код, который может работать для вас, который не полагается на реактивность

Обратите внимание, что:

• Я пересчитываю и переназначаю массив с помощью this.flatArray = flattenTree(this.data);
• Идея состоит в том, что вложенные объекты являются «источником правды», а сглаженный массив позволяет отображать шаблон.

<template>
  <div class="hello">
    <tr v-for="(item ,index) in flatArray" :key="index">
      <div
        @click="toggleExpandNode(item)"
        class="item"
        :style="{'margin-left':item.level * 1.6 +'em'}"
      >
        <div class="element">
          <span v-if="item.leaf">&#9900;</span>
          <span v-else-if="item.expand">&#9662;</span>
          <span v-else>&#9656;</span>
          &nbsp;
          <span>{{ item.label }}</span>
        </div>
      </div>
    </tr>
  </div>
</template>

<script>
const flattenTree = obj => {
  const flatTreeArr = [];
  let depth = 0;

  const flatten = (node, parentNode) => {
    flatTreeArr.push(node);
    node.level = depth;
    node.leaf = true;
    node.parent = parentNode;
    node.expand = node.expand === undefined ? true : node.expand;
    if (node.children) {
      node.leaf = false;
      if (node.expand) {
        depth++;
        node.children.forEach(br => flatten(br, node));
        depth--;
      }
    }
  };

  obj.forEach(br => flatten(br, null));
  return flatTreeArr;
};

export default {
  props: {
    data: { default: () => null, type: Array }
  },
  data() {
    return {
      flatArray: []
    };
  },
  mounted() {
    this.flatArray = flattenTree(this.data);
  },
  methods: {
    toggleExpandNode(item) {
      item.expand = !item.expand;
      this.flatArray = flattenTree(this.data);
    }
  }
};
</script>

увидеть его в действии здесь

Если объект item не имеет начального свойства expand, вы должны объявить его наблюдаемым с помощью this.$set(item, ...).

Непосредственное добавление нового свойства, такого как item.expand = ..., пропускает этот шаг, а this.$set игнорирует его. Такое свойство не будет реактивным.

Подробнее об этом здесь: https://vuejs.org/v2/guide/reactivity.html< /а>