Vue

HTML

<div id="app">
Exploring the "Avoid mutating a prop directly" VueJS error.
Root object:
 <pre>{{thing}}</pre>

  <normal v-model="thing.x" ></normal>

<trick v-model="thing" ></trick>
 normal
</div>

CSS

body {
   padding: 20px;
  font-family: Helvetica;
}
div { 
padding: 1rem;
margin-bottom: 1rem;
}
pre {
  background:#eee;padding: 1rem;
  margin-bottom: 1rem;
}
.normal { background-color: #f8fff8;border: solid 1px #008800;}
.trick { background-color: #fff8f8;border: solid 1px #880000;}

Vue

new Vue({
  el: "#app",
  data: {
    thing: {x : 'exe'}
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  },
  components: {
     Trick: {
        props: ['value'],
        data() { return {} },
        template: `<div class="trick">Example that modifies prop directly (works, no errors) but is a trick/hack?<br ><input v-model="value.x" /> <br />Local Value: {{value}} </div>`
     },
     Normal: {
        props: ['value'],
        data() { return {} },
        template: `<div class="normal">Example that modifies prop directly (causes errors)<br/><input v-model="value" /><br />Local Value: {{value}} </div>`
     }
  }
})