title: Nested components not re-rendering properly: VueJs
body: <p>I'm new to Vue and I'm building this forum kind of thing which can add nested comments in it. In here there are two components. PostForum and Comment. PostForum contains an input box and parent Comments. And inside each comment, I added child comments recursively.</p>
  
  <p>When I adding comments, It works fine. But when deleting, it sends the ajax req but there's no re-rendering.
  So this is how I designed it. When deleting a comment, I emit a global event and in PostForum component I listen to that event and deleting that comment from its data. So isn't that supposed to re-render all the comments accordingly? Can anyone tell me what am I doing wrong here?</p>
  
  <p><strong>PostForum.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;!-- comment box here --&gt;
  
    &lt;comment
      v-for="(comment, index) in comments" 
      v-if="!comment.parent_id"
      :reply="true" 
      :initialChildren="getChildren(comment.id)" 
      :key="index" 
      :comment="comment"&gt;
    &lt;/comment&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data () {
      return {
        comments: [], // all comments
          comment: { // new comment [at comment box]
              body: '',
              parent_id: 0,
          },
      }
    },
    methods: {
      deleteComment (node) {
          axios.delete(`/comments/${node.id}`)
              .then(res =&gt; {
                  this.comments.splice(node.key, 1)
              })
              .catch(err =&gt; {
                  console.log(err)
              })
      },
      getChildren: function (parent_id) {
          return this.comments.filter(child =&gt; parent_id == child.parent_id)
      },
    },
    mounted: function () {
      window.Event.$on('comment-deleted', (node) =&gt; this.deleteComment(node))
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Comment.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;button @click="deleteComment"&gt;X&lt;/button&gt;
  
    &lt;!-- comment body goes here --&gt;
  
    &lt;comment v-for="(child, i) in children" :key="i" :reply="false" :comment="child"&gt;&lt;/comment&gt;
  
    &lt;!-- reply form here --&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ['initialChildren']
    data: function () {
      return {
          newComment: {
              body: '',
              parent_id: this.comment.id,
          },
          children: this.initialChildren,
      }
    },
    methods: {
      deleteComment () {
          window.Event.$emit('comment-deleted', {key: this.$vnode.key, id: this.comment.id})
      },
    }
  }
  &lt;/script&gt;
  </code></pre>