diff --git a/src/digital-components/phonenumber-question/phonenumber-question.vue b/src/digital-components/phonenumber-question/phonenumber-question.vue
index 9057510d8..89b0387f5 100644
--- a/src/digital-components/phonenumber-question/phonenumber-question.vue
+++ b/src/digital-components/phonenumber-question/phonenumber-question.vue
@@ -22,12 +22,15 @@
 </template>
 
 <script>
+import { useField, validate } from "vee-validate";
 export default {
     name: "phoneNumberQuestion",
     props: {
         cmsWidgetName: String,
         isRequired: Boolean,
         validationRules: String,
+        hasError: Boolean,
+        centerErrorMessage: Boolean,
     },
     setup(props) {
         const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
@@ -50,6 +53,22 @@ export default {
             value: modelValue,
             initialValue: initialValue,
         };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
+            inputId,
+            props.validationRules,
+            fieldOptions
+        );
+
+        return {
+            inputId,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+        };
     },
     data() {
         return {