[vue] Composition api 에서 property로 받은 변수 watch 하는 방법

 

사용하려는 컴포넌트 vue 에서 다음과 같이 props를 사용하고 있을 때,

<script setup>
import {useStore} from "vuex";
import {computed, watch} from "vue";


const store = useStore()
const props = defineProps({
  isDialogVisible: {
    type: Boolean,
    required: true,
  }
})

// 생략

isDialogVisible 을 watch 하고 싶다면

watch(isDialogVisible, (newVal, oldVal) => {})

watch(props.isDialogVisible, (newVal, oldVal) => {})

이 방법들은 안되고 

아래와 같이 사용하면 됩니다.

watch(()=>props.isDialogVisible, (newVal, oldVal) => {
  console.log('visible : ' + newVal)
})