VueJS nested component doesn't update property on action

The other answers have noted that the reason your code doesn't work is because you shouldn't mutate properties. However, the reason the code in the fiddle doesn't work is because eee is passed a static array. In other words, since the value for eee is bound to an object hard coded into the property, that value is never converted into a reactive object.

Had you instead passed eee a data property, the array would have been converted into a reactive array and your code would work as you expect.

Vue.component('todo-item', {
  props: ['todo'],
  template: '<div>' +
    '<li>{{ todo.text }}</li>' +
    '<button v-on:click="reverseMessage">Reverse Message</button>' +
    '</div>',
  methods: {
    reverseMessage: function() {
      var reversed = this.todo.text.split('').reverse().join('');
      this.todo.text = reversed;
    }
  }
});

Vue.component('todo-list', {
  props: ['eee'],
  template: '<div><todo-item' +
    ' v-for="item in eee"' +
    ' v-bind:todo="item"' +
    ' v-bind:key="item.id">' +
    ' </todo-item></div>',

});

var app7 = new Vue({
  el: '#app-7',
  data: {
    todos: [{
      id: 0,
      text: 'Vegetables'
    }, {
      id: 1,
      text: 'Cheese'
    }, {
      id: 2,
      text: 'Whatever else humans are supposed to eat'
    }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app-7">
  <ol>

    <todo-list v-bind:eee="todos"></todo-list>
  </ol>
</div>

Note the change to the template:

<todo-list v-bind:eee="todos"></todo-list>

And the Vue:

var app7 = new Vue({
  el: '#app-7',
  data:{
    todos: [{ id: 0, text: 'Vegetables' },{ id: 1, text: 'Cheese' },{ id: 2, text: 'Whatever else humans are supposed to eat' }]
  }
})

Thats all I changed in the code to make it work as expected.

This is how reactive objects and arrays passed as properties work in Vue. From the documentation:

Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child will affect parent state.

Vue will not complain if you mutate an object or array in this way. Where Vue will complain is if you attempted to set the object or array to a completely different object or array.

Whether that behavior is desired is a design decision. Sometimes you may want to take advantage of it and other times not.

The issue is that you are attempting to modify the props of the component. Props should not be modified: instead, you can:

1. Store it as a data property, and
2. Modify it (in this case, reverse it) whenever the button is clicked.

Although this approach may sound unnecessarily verbose, the advantage here is that you simply use the text from the component's data in the template, and it will be reactive :) changes to the data will be reflected in the DOM itself.

Vue.component('todo-item', {
    props: ['todo'],
    data: function() {
        // Store inherited props in data
        return {
            text: this.todo.text
        };
    },
    template: '<div>' +
                '<li>{{ text }}</li>' +
                '<button v-on:click="reverseMessage">Reverse Message</button>' +
              '</div>',
    methods: {
      reverseMessage: function () {
        // Reverse text in data and overwrite it
        this.text = this.text.split('').reverse().join('');
      }
    }
  });

See example here: https://jsfiddle.net/teddyrised/37y1ukjh/3/, or the proof-of-concept code snippet below:

  Vue.component('todo-item', {
    props: ['todo'],
    data: function() {
    	return {
      	text: this.todo.text
      };
    },
    template: '<div>' +
                '<li>{{ text }}</li>' +
                '<button v-on:click="reverseMessage">Reverse Message</button>' +
              '</div>',
    methods: {
      reverseMessage: function () {
        this.text = this.text.split('').reverse().join('');
      }
    }
  });

  Vue.component('todo-list', {
    props: ['eee'],
    template: '<div><todo-item' +
                ' v-for="item in eee"' +
                ' v-bind:todo="item"' +
                ' v-bind:key="item.id">' +
              ' </todo-item></div>'
  });

  var app7 = new Vue({
    el: '#app-7'
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app-7">
  <ol>

    <todo-list 
      v-bind:eee="[{ id: 0, text: 'Vegetables' },{ id: 1, text: 'Cheese' },{ id: 2, text: 'Whatever else humans are supposed to eat' }]">
        
    </todo-list>
  </ol>
</div>