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>
</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: {
  	changeValue (value) {
    	this.thing.x = value
    }
  },
  provide () {
  	return { changeValue: this.changeValue }
  },
  components: {
     Normal: {
        props: ['value'],
        inject: ['changeValue'],
        data() { return {} },
        template: `<div class="normal">Example that modifies prop directly (causes errors)<br/><input @input="(e) => changeValue(e.target.value)" /><br />Local Value: {{value}} </div>`
     }
  }
})