var vm = new Vue({
  el: '#app',
  /*
   data選項中的資料：
   1.haiZeiTuan_Name --> 海賊團名稱
   2.船員的名稱 = 海賊團名稱（草帽海賊團） + 船員名稱（例如索隆）
 
   這些資料裡存在這種關係：
   （多個）船員名稱資料 --> 依賴於 --> （1個)海賊團名稱資料
    一個數據變化 --->  多個數據全部變化
  */
  data: {
    haiZeiTuan_Name: '草帽海賊團',
    suoLong: '草帽海賊團索隆',
    naMei: '草帽海賊團娜美',
    xiangJiShi: 
 
'草帽海賊團香吉士'
  },
  /*
   在watch中，一旦haiZeiTuan_Name（海賊團名稱）發生改變
   data選項中的船員名稱全部會自動改變 （suoLong，naMei，xiangJiShi）
   並把它們打印出來
  */
  watch: {
    haiZeiTuan_Name: function (newName) {
      this.suoLong = newName + '索隆'this.naMei = newName + '娜美'this.xiangJiShi = newName + '香吉士'
      console.log(this.suoLong)
      console.log(
 
this.naMei)
      console.log(this.xiangJiShi)
    }
  }
})
 
// 更改watch選項中監控的主資料
vm.haiZeiTuan_Name = '橡膠海賊團'