Vue2+CompositionAPI で watch

watch の書き方がよくわからなくなったので整理。

オブジェクトを watch するときは cloneDeep しないと変更前の値を正しくとれないので、(refでも)getter関数を通す必要あり。
getter関数を通す場合、 ref や computed は .value まで指定する必要あり。
オブジェクトを watch するときは 第3引数で deep: true の指定は必須。

オブジェクト内の個別の値を watch するときも getter関数を通す必要あり。

import {defineComponent, ref, reactive, computed, watch} from '@nuxtjs/composition-api'
import _ from 'lodash'
export default defineComponent({
  props:{
    propVal:{
      type:String,
      default:()=>{
        return ''
      }
    },
  propObj:{
    type:Object,
      default:()=>{
        return {}
      }
    }
  },
  setup(props){
    const refVal = ref(0)
    const refObj = ref({
      aa:'aaa',
      bb:'bbb'
    })
    const reactiveObj = reactive({
      aa:'aaa',
      bb:'bbb'
    })
    const computedObj = computed(()=>reactiveObj)
    watch(
      refVal, // ref の場合はそのまま渡す
      (current,old) => {
        // 処理
      },
      { immediate: true } // 初回処理がいるときは immediate の指定
    )
    watch(
　　　// refでもオブジェクトの場合はreactiveと同じようにcloneDeepする必要があり、ゲッター関数を使うことになるので value まで指定する必要あり
      ()=>_.cloneDeep(refObj.value) , 
      (current,old) => {
        // 処理
      },
      { immediate: true, deep: true } // オブジェクトのときは deep の指定
    )
    watch(
      ()=>refObj.value.aa , // 個別の値まで指定すれば cloneDeep はなくていい
      (current,old) => {
        // 処理
      },
      { immediate: true }
    )
    watch(
      // computed でもオブジェクトの場合は cloneDeepする必要があり、ゲッター関数を使うことになるので value まで指定する必要あり
      ()=>_.cloneDeep(computedObj.value) , 
      (current,old) => {
        // 処理
      },
      { immediate: true, deep: true } // オブジェクトのときは deep の指定
    )
    watch(
      ()=>_.cloneDeep(reactiveObj) , // deepクローンしないと変更前の値をとれない
      (current,old) => {
        // 処理
      },
      { immediate: true, deep: true }
    )
    watch(
      ()=>reactiveObj.aa , // 個別の値まで指定すれば cloneDeep はなくていい
      (current,old) => {
        // 処理
      },
      { immediate: true }
    )
    watch(
      ()=>props.propVal,
      (current,old) => {
        // 処理
      },
      { immediate: true }
    )
    watch(
      ()=>_.cloneDeep(props.propObj), // deepクローンしないと変更前の値をとれない
      (current,old) => {
        // 処理
      },
      { immediate: true, deep: true } // オブジェクトのときは deep の指定
    )
    return {}
  }
})