<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js - Florian Studio</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id = "computed_props">
         キロメートル : <input type = "text" v-model = "kilometers">
         メートル : <input type = "text" v-model = "meters">
      </div>
	   <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
		vm.$watch('kilometers', function (newValue, oldValue) {
		    document.getElementById ("info").innerHTML = "変更前の値は: " + oldValue + "，変更後の値は: " + newValue ;
		})
      </script>

</body>