Vue에서 props는 ReadOnly이다

Vue에서 props는 read-only이기 때문에 값을 수정할 수 없다.

수정하려면 별도의 변수에 할당한 후 수정해야 한다.

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    progress: Number
})

const progress = ref(props.progress)

watch(() => props.progress, (newValue) => {
    if (newValue > 100 || newValue < 0) {
        progress.value = 0
    } else {
        progress.value = newValue
    }
})
</script>