Reactivity issue


I have a simple unordered tree with at most one root that I build iteratively with a ui. The tree starts as an array:

data: {
  return {
    tree: []

At most, I add one root node which may contain n child nodes represented by:

  id: this.index++,
  description: "...",
  children: [],
  parent: parent,
  foreignKey: null,
  primaryKey: null

The node has some properties defined at creation and others set at runtime. The children property holds new nodes that may get added later.

  • When adding a child node, I find the parent and use .push() to append the node.
  • When deleting a node, I find the parent of the node and use .splice() on its children collection.
  • When setting properties on a node, I use this.$set().

This appears to facilitate the rendering and updating of a recursive component which draws the tree, however computed and watched properties fail to detect the changes.

How can I work around this?


Can you provide a specific example?


Are you using the deep: true setting on the watchers?


I didn’t even know such functionality existed until now, that solved the problem.

Thanks guys!