<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <div>
      <input type="text" @input="changeObj1">
      <p>{{obj.prop1}}</p>
    </div>
    <div>
      <input type="text" @input="changeObj2">
      <p>{{obj.prop2}}</p>
    </div>
  </div>
</template>

<script>
import { reactive, watch} from 'vue'

export default { 
  methods: {
    changeObj1(e) {
      this.obj.prop1 = e.target.value;
    },
    changeObj2(e) {
      this.obj.prop2 = e.target.value;
    }
  },
  setup () {
    const obj = reactive({
      prop1: 'prop1',
      prop2: 'prop2'
    })
    
    watch(
      () => obj.prop1,
      (prop1, prevProp1) => {
        console.log("#######");
        console.log("Lets watch:");
        console.group();
        console.log("obj.prop1: " + prop1);
        console.log("Old prop1: " + prevProp1);
        console.groupEnd();
        console.group();
        console.log("Prop2: " + obj.prop2);
        console.groupEnd();
        console.log("End watch.");
        console.log("#######");        
      }
    )
    
    return {
     obj    
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>