JSFiddle - React, Tailwind, and code Playground

by WoJWoJ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="root">
  {{text_shallow}} {{text_deep}}
</div>

JavaScript

var vm = new Vue({
  el: "#root",
  data: {
    text_deep: 'x',
    text_shallow: 'x',
    shallow: 0,
    deep: {
      nested: {
        data: 0
      }
    }
  },
  watch: {
    shallow: function() {
      this.text_shallow = 1;
    },
    'deep.nested.data': function() {
      this.text_deep = 2;
    }
  }
})

setTimeout(function() {
  vm.shallow = 10;
  vm.deep.nested.data = 20;
}, 2000)