diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index 49378d4188a6128752436d2ecb2e40ba4a39b4f0..eae61a0de607e8e378735852488035aa6a28491d 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -24,7 +24,8 @@ const emit = defineEmits(['update']);
 if (props.active) {
   active.value = props.active;
 }
-
+const propActive = computed(() => props.active);
+watch(propActive, () => (active.value = propActive.value));
 watch(active, () => emit('update', active));
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
diff --git a/src/components/Knob/Knob.vue b/src/components/Knob/Knob.vue
index 80861ad2779bbe7eed9a03f1876ecd4fd742006d..c1fb4ef7d01f1b7e25c0932628f2d0631534f076 100644
--- a/src/components/Knob/Knob.vue
+++ b/src/components/Knob/Knob.vue
@@ -30,6 +30,8 @@ const emit = defineEmits(['update']);
 if (props.value) {
   value.value = props.value;
 }
+const propValue = computed(() => props.value);
+watch(propValue, () => (value.value = propValue.value));
 watch(value, () => emit('update', value));
 
 const isClickHold = ref<boolean>(false);
diff --git a/src/components/ProgressBar/ProgressBar.vue b/src/components/ProgressBar/ProgressBar.vue
index 5245203f557bc035cad4834dde2a533f34fc0f89..4936a0dd8df1fa0e17843ea9e20a6610d4787f5f 100644
--- a/src/components/ProgressBar/ProgressBar.vue
+++ b/src/components/ProgressBar/ProgressBar.vue
@@ -17,9 +17,8 @@ const props = withDefaults(defineProps<IProgressBarProps>(), {
 const value = defineModel() as Ref<number>;
 const emit = defineEmits(['update']);
 
-if (props.value) {
-  value.value = props.value;
-}
+const propValue = computed(() => props.value);
+watch(propValue, () => (value.value = propValue.value), { immediate: true });
 watch(value, () => emit('update', value));
 
 const active = computed(() => `${(value.value / props.max) * 100}%`);
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index df733be4871aaa353fe482112e7278421f1cdd35..db8d86021ce51f7902998ffb2687bf6001314806 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -21,6 +21,8 @@ const emit = defineEmits(['update']);
 if (props.value) {
   value.value = props.value;
 }
+const propValue = computed(() => props.value);
+watch(propValue, () => (value.value = propValue.value));
 watch(value, () => emit('update', value));
 
 const onHoverIndex = ref();
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index 44e5dc42f397f3f7ad2a5800a807976eb0e1829f..92bec55016adba557e12e6cb66eb8fdbeb3c711e 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -25,7 +25,8 @@ const emit = defineEmits(['update']);
 if (props.selected) {
   selected.value = props.selected;
 }
-
+const propSelected = computed(() => props.selected);
+watch(propSelected, () => (selected.value = propSelected.value));
 watch(selected, () => emit('update', selected));
 
 const isOpen = ref<boolean>(false);